- 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>Basic usage with html <fieldset> element
<fieldset class="ds-group">
<p>Content</p>
</fieldset>Header
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>Title with html <fieldset> element
<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>Xsmall title
<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><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>Color support with html <fieldset> element
<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>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>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>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>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>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>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
<div class="ds-group --loading">
<header>Title</header>
<p>Content</p>
</div>Alternative loading-refresh icon
<div class="ds-group --loading-refresh">
<header>Title</header>
<p>Content</p>
</div>Custom icon by adding any icon class
<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.
<div class="ds-group" data-ds-message="Message text">
<header>Title</header>
<p>Content</p>
</div>Loading state with a message
<div class="ds-group --loading" data-ds-message="Message text">
<header>Title</header>
<p>Content</p>
</div>You can set a custom icon
<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
<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
<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>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>