Skip to main content

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.
Group of choice summaries

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>