Skip to content

Soracom

Design System
Home Design System Elements Notice

Notice

Notice is for displaying an inline panel with text and an optional icon.

Options 

Basic usage 

<div class="ds-notice">Notice text</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-notice">Notice text</div>
Longer text example
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>

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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-notice --color-magenta-bright">Notice text</div>
Longer text example
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-notice --icon-online">Notice text</div>
Longer text example
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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
<div class="ds-notice --icon-online --color-celeste-light">Notice text</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-notice --icon-online --color-celeste-light">Notice text</div>
Longer text combined icon and component color example
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>

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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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
<!-- 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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- 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> &nbsp; <span>Check your email account for further instructions</span> &nbsp; (<a>Send again</a>)
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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
<div class="ds-group --small">
  <p>Content</p>
  <div class="ds-notice --info">Notice text</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --small">
  <p>Content</p>
  <div class="ds-notice --info">Notice text</div>
</div>