Skip to content
MENU

Soracom

Design System

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>

Title 

Default 

Title with html <div> element
<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <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>

Large 

Large title with html <div> element
<div class="ds-group">
  <div class="ds-group__title-large">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <div class="ds-group__title-large">Title</div>
  <p>Content</p>
</div>

Small 

Small title with html <div> element
<div class="ds-group">
  <div class="ds-group__title-small">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <div class="ds-group__title-small">Title</div>
  <p>Content</p>
</div>

Visual states 

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

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

Component color 

Color support with html <div> element
<div class="ds-group--color-celeste-bright">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group--color-celeste-bright">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
Color support with html <fieldset> element
<fieldset class="ds-group--color-magenta-bright">
  <legend>Legend</legend>
  <p>Content</p>
</fieldset>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<fieldset class="ds-group--color-magenta-bright">
  <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">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group--notification">
  <div class="ds-group__title">Title</div>
  <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">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group--notification-success">
  <div class="ds-group__title">Title</div>
  <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">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group--flow-down">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
Flow down style with html <fieldset> element
<fieldset class="ds-group--flow-down">
  <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>
Flow down with component color example
<div class="ds-group--flow-down ds-group--color-celeste-bright">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group--flow-down ds-group--color-celeste-bright">
  <div class="ds-group__title">Title</div>
  <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">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group--loading">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
Loading state using --loading-refresh icon
<div class="ds-group--loading-refresh">
  <div class="ds-group__title">Title</div>
  <p>Content</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group--loading-refresh">
  <div class="ds-group__title">Title</div>
  <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">
  <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">
  <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>