Group
Group is a layout component that controls the flow of collections of like components.
Example
- Search jittery chickens.
- Force sour moor astonishing bomb.
- Shut defiant reflect quarter interesting functional.
- Search jittery chickens.
- Force sour moor astonishing bomb.
- Shut defiant reflect quarter interesting functional.
Best practices
Do
- Use this to allow for groups of like components.
- Use for checkbox groups, choice-summary groups, product placements, radio groups, button groups and list groups.
Don’t
- Don't use this on components that automaticaly include the c-group class. For example, a carousel already has it's own group.
- Don't use group along with a carousel, which groups natively based on it's different usage.
Also known as
Channel
Collections
Related
Button
Checkbox
Choice summary
Flipper
List
Radio
Sequence indicator
Options
A single option exists, f-wrap-items, which can be used wrap a group of components.
Development
- Schema definition: The group schema defines the acceptable configurations, requirements, and options for each component.
Code and preview
Default group
<div class="c-group">
<a class="c-action-trigger" href="#">Link to action</a>
<a class="c-action-trigger" href="#">Link to another action</a>
</div>Group with wrap option
- Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.
- Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.
- Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.
- Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.
- Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.
<ul class="c-group f-wrap-items">
<li class="c-choice-summary">
<button class="c-action-trigger c-glyph glyph-cancel" aria-label="Remove"></button>
<span>Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.</span>
</li>
<li class="c-choice-summary">
<button class="c-action-trigger c-glyph glyph-cancel" aria-label="Remove"></button>
<span>Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.</span>
</li>
<li class="c-choice-summary">
<button class="c-action-trigger c-glyph glyph-cancel" aria-label="Remove"></button>
<span>Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.</span>
</li>
<li class="c-choice-summary">
<button class="c-action-trigger c-glyph glyph-cancel" aria-label="Remove"></button>
<span>Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.</span>
</li>
<li class="c-choice-summary">
<button class="c-action-trigger c-glyph glyph-cancel" aria-label="Remove"></button>
<span>Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante.</span>
</li>
</ul>