Notice

Options

Basic usage

<div>

html

Copy

<div class="ds-notice">Notice text</div>

Longer text example

html

Copy

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

Longer text example

html

Copy

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

Notice using an html anchor (a) tag

html

Copy

<a class="ds-notice" href="#">Notice text</a>

Longer text example, using an html anchor (a) tag

html

Copy

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

html

Copy

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

html

Copy

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

Longer text example

html

Copy

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

html

Copy

<div class="ds-notice --color-magenta-bright">Notice text</div>

Longer text example

html

Copy

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

html

Copy

<div class="ds-notice --icon-online">Notice text</div>

Longer text example

html

Copy

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

Combined icon and component color example

html

Copy

<div class="ds-notice --icon-online --color-celeste-light">Notice text</div>

Longer text combined icon and component color example

html

Copy

<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

Default

html

Copy

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

Alternative loading-refresh icon

html

Copy

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

Custom icon by adding any icon class

html

Copy

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

html

Copy

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

Loading state with a message

html

Copy

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

You can set a custom icon

html

Copy

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

You can set a custom icon, with the loading state animation

html

Copy

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

html

Copy

<div class="ds-notice --pinned">Notice text</div>
<div class="ds-notice --pinned --info">Notice text</div>

Strong color

html

Copy

<div class="ds-notice --strong">Notice text</div>
<div class="ds-notice --strong --info">Notice text</div>

Fees

html

Copy

<div class="ds-notice --fee">Notice text</div>
<div class="ds-notice --fee">
  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.
</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.

html

Copy

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

html

Copy

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

Pinned style

html

Copy

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

html

Copy

<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> &nbsp;
            <span>Check your email account for further instructions</span>
            &nbsp; (<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.

Using a notice inside a ds-group html <div> element

html

Copy

<div class="ds-group --small">
  <p>Content</p>
  <div class="ds-notice --info">Notice text</div>
</div>