Skip to content

Soracom

Design System
Home Design System Containers Group

Group

A visual container grouping a set of elements. Can be used with fieldset/legend.

Options 

Basic usage 

Basic usage with html <div> element
<div class="ds-group">
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <p>Content</p>
</div>
Basic usage with html <fieldset> element
<fieldset class="ds-group">
  <p>Content</p>
</fieldset>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<fieldset class="ds-group">
  <p>Content</p>
</fieldset>

Default 

By default the header is set to ds-heading --small-bold

Title with html <header> element
<div class="ds-group">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <header>Title</header>
  <p>Content</p>
</div>
Title with html <fieldset> element
<fieldset class="ds-group">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<fieldset class="ds-group">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>

Sizes 

You can change the header size by using ds-heading classes:

Large title
<div class="ds-group">
  <header class="ds-heading --large-bold">Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <header class="ds-heading --large-bold">Title</header>
  <p>Content</p>
</div>
Xsmall title
<div class="ds-group">
  <header class="ds-heading --xsmall-bold">Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <header class="ds-heading --xsmall-bold">Title</header>
  <p>Content</p>
</div>

Visual states 

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

<div class="ds-group --alert">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --alert">
  <header>Title</header>
  <p>Content</p>
</div>
<div class="ds-group --info">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --info">
  <header>Title</header>
  <p>Content</p>
</div>

Component color 

Color support with html <div> element
<div class="ds-group --color-celeste-bright">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --color-celeste-bright">
  <header>Title</header>
  <p>Content</p>
</div>
Color support with html <fieldset> element
<fieldset class="ds-group --color-magenta">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<fieldset class="ds-group --color-magenta">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>

Notification indicator 

A group can display a notification indicator (dot) by adding the class ds-group--notification.

Notification indicators support with html <div> element
<div class="ds-group --notification">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --notification">
  <header>Title</header>
  <p>Content</p>
</div>

Notification indicators adhere to 4x preset visual states - alert, warning, success and info.

Notification indicators visual states with html <div> element
<div class="ds-group --notification-success">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --notification-success">
  <header>Title</header>
  <p>Content</p>
</div>

Additionally, if the group has an attribute data-notification-counter set to a non-empty value, that value will be shown in the indicator. If the attribute is set to empty data-notification-counter="" the indicator dot will be hidden.

Notification indicators counter support with html <fieldset> element
<fieldset class="ds-group --notification" data-notification-counter="3">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<fieldset class="ds-group --notification" data-notification-counter="3">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>

Flow down 

Flow down style with html <div> element
<div class="ds-group --flow-down">
  <header>Title</header>
  <p>Content</p>
</div>
<div class="ds-group">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --flow-down">
  <header>Title</header>
  <p>Content</p>
</div>
<div class="ds-group">
  <header>Title</header>
  <p>Content</p>
</div>
Flow down style with html <fieldset> element
<fieldset class="ds-group --flow-down">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>
<fieldset class="ds-group">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<fieldset class="ds-group --flow-down">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>
<fieldset class="ds-group">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>
Flow down with component color example
<div class="ds-group --flow-down --color-celeste-bright">
  <header>Title</header>
  <p>Content</p>
</div>
<div class="ds-group">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --flow-down --color-celeste-bright">
  <header>Title</header>
  <p>Content</p>
</div>
<div class="ds-group">
  <header>Title</header>
  <p>Content</p>
</div>

Loading state 

Available from v1.7.9+

When a group has the the class ds-group --loading any content inside the group is not visible and the loading state animation is shown.

Loading state using --loading icon
<div class="ds-group --loading">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --loading">
  <header>Title</header>
  <p>Content</p>
</div>
Loading state using --loading-refresh icon
<div class="ds-group --loading-refresh">
  <header>Title</header>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --loading-refresh">
  <header>Title</header>
  <p>Content</p>
</div>

Examples 

Usage with ds-notice 

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>
Using a notice inside a ds-group html <fieldset> element
<fieldset class="ds-group">
  <p>Content</p>
  <div class="ds-notice --warning">Notice text</div>
</fieldset>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<fieldset class="ds-group">
  <p>Content</p>
  <div class="ds-notice --warning">Notice text</div>
</fieldset>

Usage with ds-banner and ds-details 

<div class="ds-group --no-indent">
  <header class="ds-banner --plain --indent-small">
    <div>
      <p class="ds-text --label">AWS IoT</p>
    </div>
    <button class="ds-button --plain --icon-edit --hide-label">
      <span>Edit</span>
    </button>
    <button class="ds-button --plain --icon-cancel --hide-label">
      <span>Delete</span>
    </button>
  </header>
  <table class="ds-details --plain">
    <tbody>
      <tr>
        <th>Region</th>
        <td>
          <div>Value</div>
        </td>
        <th>Policyname</th>
        <td>
          <div>IoT Policy A</div>
        </td>
      </tr>
      <tr>
        <th>Thing</th>
        <td>
          <div>Value</div>
        </td>
        <th>Host</th>
        <td>
          <div>example.com</div>
        </td>
      </tr>
      <tr>
        <th>Thing</th>
        <td colspan="3">
          <div>Value</div>
        </td>
      </tr>
    </tbody>
  </table>
  
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group --no-indent">
  <header class="ds-banner --plain --indent-small">
    <div>
      <p class="ds-text --label">AWS IoT</p>
    </div>
    <button class="ds-button --plain --icon-edit --hide-label">
      <span>Edit</span>
    </button>
    <button class="ds-button --plain --icon-cancel --hide-label">
      <span>Delete</span>
    </button>
  </header>
  <table class="ds-details --plain">
    <tbody>
      <tr>
        <th>Region</th>
        <td>
          <div>Value</div>
        </td>
        <th>Policyname</th>
        <td>
          <div>IoT Policy A</div>
        </td>
      </tr>
      <tr>
        <th>Thing</th>
        <td>
          <div>Value</div>
        </td>
        <th>Host</th>
        <td>
          <div>example.com</div>
        </td>
      </tr>
      <tr>
        <th>Thing</th>
        <td colspan="3">
          <div>Value</div>
        </td>
      </tr>
    </tbody>
  </table>
  
</div>