Skip to content
MENU

Soracom

Design System

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

Strong color 

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