Notice
cds-notice
The notice component is a versatile feedback tool that can be used for displaying both empty state messages and various types of system feedback. Whether you need to inform users that there's no data available or provide some static feedback, this ensures clear and consistent communication
Default
- Feedback:
--information - Position:
--center
Nothing here yetLooks like there's no data to display. Start by adding a new item or refreshing the page.
<div class="cds-notice">
<span class="cds-notice__icon cds-ph-magnifying-glass"></span>
<span class="cds-notice__title">Nothing here yet</span>
<span class="cds-notice__text">Looks like there...</span>
</div>
Elements
| Element | Code | Parent | HTML tag | Required |
|---|---|---|---|---|
| Icon | cds-notice__icon | Block: cds-notice | <span> | required |
| Hero | cds-notice__hero | Block: cds-notice | <span> | optional |
| Title | cds-notice__title | Block: cds-notice | <span> | required |
| Text | cds-notice__text | Block: cds-notice | <span> | optional |
| Footer | cds-notice__footer (container) | Block: cds-notice | <div> | optional |
404Page not foundThe page you're looking for doesn't exist. Try going back or check the URL.
Modifiers
| Modifier | Options |
|---|---|
| Feedback | --information, --success, --alert, --error |
| Position | --center, --left |
Feedback
No files here yetLooks like this folder is empty. Start by uploading a new file.
All set!Your action was completed successfully.
Something went wrongAn unexpected error occurred. Try again or contact support if the issue persists.
<div class="cds-notice cds-notice--success cds-notice--center">
<span class="cds-notice__icon cds-ph-check-circle-fill"></span>
<span class="cds-notice__title">All set!</span>
<span class="cds-notice__text">Your action was completed successfully.</span>
</div>
States
| Modifier | Options |
|---|---|
| States | is-loading |
Is loading
We're almost there!The content is loading. Please be patient while we fetch the data.
<div class="cds-notice is-loading">
<span class="cds-notice__icon cds-ph-house"></span>
<span class="cds-notice__title">We're almost there!</span>
<span class="cds-notice__text">The content is loading...</span>
</div>