Options
Basic usage
<div>
<div class="ds-notice">Notice text</div><div class="ds-notice">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div class="ds-notice">
<h4>Aenean lacinia bibendum</h4>
<p>Morbi leo risus, porta ac consectetur ac, <em>vestibulum at eros</em>. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. <strong>Aenean lacinia bibendum nulla</strong> sed consectetur.</p>
<p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div><a>
A notice may use an html anchor <a> tag, however depending on the context and length of the notice message it is often better to use the <a> inline surrounding the specific text describing the specific context of the link.
<a class="ds-notice" href="#">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>Visual states
Notice adheres to the 4x preset visual states - alert, warning, success and info.
<div class="ds-notice --alert">Notice text</div>
<div class="ds-notice --warning">Notice text</div>
<div class="ds-notice --success">Notice text</div>
<div class="ds-notice --info">Notice text</div>Stronger notice colors for the preset visual states can be shown by combining with the ds-notice --strong style.
<div class="ds-notice --alert --strong">Notice text</div>
<div class="ds-notice --warning --strong">Notice text</div>
<div class="ds-notice --success --strong">Notice text</div>
<div class="ds-notice --info --strong">Notice text</div><div class="ds-notice --alert">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>Component color
Notice supports component color classes.
<div class="ds-notice --color-magenta-bright">Notice text</div><div class="ds-notice --color-magenta-bright">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>Icons
To use a specific icon, use a class such as ds-notice --icon-online from the available published icon modifier list.
<div class="ds-notice --icon-online">Notice text</div><div class="ds-notice --icon-online">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div class="ds-notice --icon-online --color-celeste-light">Notice text</div><div class="ds-notice --icon-online --color-celeste-light">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>Loading state
A notice can be triggered to display a loading state - where the notice contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the notice.
Additional options are available using Message state
<div class="ds-notice --loading">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div class="ds-notice --loading-refresh">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div class="ds-notice --loading --icon-radar">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>Message state
Message state extends and can be used with Loading state. If a notice has a data-attribute data-ds-message the notice contents are hidden, and replaced by an icon and the text of the data-ds-message.
<div class="ds-notice" data-ds-message="Message text">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div class="ds-notice --loading" data-ds-message="Message text">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div class="ds-notice --icon-rocket" data-ds-message="Message text">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div class="ds-notice --loading --icon-compass" data-ds-message="Message text">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>Styles
Pinned style
Uses a slightly more compact format and lacks the corner radius. Designed to be used when flush against other design elements (similar to how text addons work).
<div class="ds-notice --pinned">Notice text</div>
<div class="ds-notice --pinned --info">Notice text</div>Strong color
<div class="ds-notice --strong">Notice text</div>
<div class="ds-notice --strong --info">Notice text</div>Column layout
If you apply ds-cols to the same element as ds-notice the contents of the notice will be displayed as columns.
<div class="ds-notice --info ds-cols">
<p class="ds-span--6">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.</a></p>
<p class="ds-span--6">Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>When a notice is set to display it’s content as columns, any buttons directly inside the notice will be aligned right.
<div class="ds-notice --info ds-cols">
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<button class="ds-button --plain --icon-cancel --hide-label">
<span>Button label</span>
</button>
<button class="ds-button --plain --icon-confirm --hide-label">
<span>Button label</span>
</button>
</div><!-- Example with plain buttons -->
<div class="ds-notice --info --pinned ds-cols">
<p>Notice text <a href="#">Link</a></p>
<button class="ds-button --plain --icon-cancel --hide-label">
<span>Button label</span>
</button>
<button class="ds-button --plain --icon-confirm ds-button-X-hide-label">
<span>Button label</span>
</button>
</div>
<!-- Example with default buttons -->
<div class="ds-notice --info --pinned ds-cols">
<p>Notice text <a href="#">Link</a></p>
<button class="ds-button --icon-cancel --hide-label">
<span>Button label</span>
</button>
<button class="ds-button --icon-confirm ds-button-X-hide-label">
<span>Button label</span>
</button>
</div>
<!-- Example with primary button -->
<div class="ds-notice --info --pinned ds-cols">
<p>Notice text <a href="#">Link</a></p>
<button class="ds-button --icon-cancel --hide-label">
<span>Button label</span>
</button>
<button class="ds-button --primary --icon-confirm ds-button-X-hide-label">
<span>Button label</span>
</button>
</div>Examples
Notice with embedded ds-datatable
<div class="ds-notice ds-rows">
<div class="ds-text">Email addresses associated with your account but not currently in use</div>
<table class="ds-datatable --embedded --compact">
<thead>
<tr>
<th>Email addresses</th>
<th></th>
<th class="ds-datatable__col--max"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="ds-text --nowrap">adrian+emailtest2@soracom.io</div>
</td>
<td>
<button class="ds-button--plain --hide-label --alert --icon-delete">
<span>Delete</span>
</button>
</td>
<td>
<div class="ds-text">
<span class="ds-tag --warning">Unverified</span> <span>Check your email account for further instructions</span> (<a>Send again</a>)
</div>
</td>
</tr>
</tbody>
</table>
</div>Usage within ds-group
If a ds-notice is the last element inside a group, it will be automatically outdented and presented as a footer.