- Home
- Design system
- Containers
- Group
Group
A visual container grouping a set of elements. Can be used with fieldset/legend.
Options
Basic usage
Header
Default
By default the header is set to ds-heading --small-bold
Sizes
You can change the header size by using ds-heading classes:
Visual states
Group adheres to the 4x preset visual states - alert, warning, success and info.
Component color
Notification indicator
A group can display a notification indicator (dot) by adding the class ds-group--notification.
Notification indicators adhere to 4x preset visual states - alert, warning, success and info.
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.
Flow down
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
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.
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.