Options

Basic usage

<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.

Visual states

Notice adheres to the 4x preset visual states - alert, warning, success and info.

Stronger notice colors for the preset visual states can be shown by combining with the ds-notice --strong style.

Component color

Notice supports component color classes.

Icons

To use a specific icon, use a class such as ds-notice --icon-online from the available published icon modifier list.

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

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.

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).

Strong color

Flow down

The --flow-down modifier adds a visual indicator that the notice content flows into the next element. This is useful for showing contextual information that relates to the section below.

Fees

Column layout

If you apply ds-cols to the same element as ds-notice the contents of the notice will be displayed as columns.

When a notice is set to display it’s content as columns, any buttons directly inside the notice will be aligned right.

Examples

Notice with embedded ds-datatable

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.

Notice with pinned tag