Soracom

Design System
  1. Home
  2. Design system
  3. Containers
  4. 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

html
Copy
<div class="ds-group">
  <p>Content</p>
</div>

Basic usage with html <fieldset> element

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

html
Copy
<div class="ds-group">
  <header>Title</header>
  <p>Content</p>
</div>

Title with html <fieldset> element

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

html
Copy
<div class="ds-group">
  <header class="ds-heading --large-bold">Title</header>
  <p>Content</p>
</div>

Xsmall title

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

html
Copy
<div class="ds-group --alert">
  <header>Title</header>
  <p>Content</p>
</div>
html
Copy
<div class="ds-group --info">
  <header>Title</header>
  <p>Content</p>
</div>

Component color

Color support with html <div> element

html
Copy
<div class="ds-group --color-celeste-bright">
  <header>Title</header>
  <p>Content</p>
</div>

Color support with html <fieldset> element

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

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

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

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

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

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

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

A group can be triggered to display a loading state - where the group contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the group.

Additional options are available using Message state

Default

html
Copy
<div class="ds-group --loading">
  <header>Title</header>
  <p>Content</p>
</div>

Alternative loading-refresh icon

html
Copy
<div class="ds-group --loading-refresh">
  <header>Title</header>
  <p>Content</p>
</div>

Custom icon by adding any icon class

html
Copy
<div class="ds-group --loading --icon-radar">
  <header>Title</header>
  <p>Content</p>
</div>

Message state

Message state extends and can be used with Loading state. If a group has a data-attribute data-ds-message the group contents are hidden, and replaced by an icon and the text of the data-ds-message.

html
Copy
<div class="ds-group" data-ds-message="Message text">
  <header>Title</header>
  <p>Content</p>
</div>

Loading state with a message

html
Copy
<div class="ds-group --loading" data-ds-message="Message text">
  <header>Title</header>
  <p>Content</p>
</div>

You can set a custom icon

html
Copy
<div class="ds-group --icon-rocket" data-ds-message="Message text">
  <header>Title</header>
  <p>Content</p>
</div>

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

html
Copy
<div class="ds-group --loading --icon-compass" data-ds-message="Message text">
  <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

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

html
Copy
<fieldset class="ds-group">
  <p>Content</p>
  <div class="ds-notice --warning">Notice text</div>
</fieldset>

Usage with ds-banner and ds-details

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