Group

The Group component provides a reusable pattern for group in the interface.

Horizontal group

The group component resets (removes) margins, and border-radius to make the apperance of horizontally stacked elements.

<div class="c-group c-group--shadow c-group--horizontal" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Search" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">Search</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Search" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">Search</span></span></button>
</div>

@group(['direction' => 'horizontal', 'classList' => ['c-group--shadow']])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Search'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Search'
    ])
    @endbutton
@endgroup

Vertical group

The group component resets (removes) margins, and border-radius to make the apperance of vertically stacked elements.

<div class="c-group c-group--vertical" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Option One" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">Option One</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Option two" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">Option two</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type=
  "button" aria-label="option three" data-component="button"><span class="c-button__label"><span class="c-button__label-text">option three</span></span></button>
</div>

@group(['direction' => 'vertical'])

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Option One'
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Option two',
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'option three'
    ])
    @endbutton

@endgroup

Justify items

Align the elements within the group as you to either position

<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-left" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="left" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">left</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="left" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">left</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-center" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">center</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">center</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-right" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="right" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">right</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="right" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">right</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-space-between" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-between" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">space-between</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-between" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">space-between</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-space-around" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-around" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">space-around</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-around" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">space-around</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-space-evenly" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-evenly" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">space-evenly</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-evenly" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">space-evenly</span></span></button>
</div>

@group([
    'justifyContent' => 'left',
    'classList' => ['u-margin__bottom--3']
])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'left'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'left'
    ])
    @endbutton

@endgroup

@group([
    'justifyContent' => 'center',
    'classList' => ['u-margin__bottom--3']
])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'center'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'center'
    ])
    @endbutton

@endgroup

@group([
    'justifyContent' => 'right',
    'classList' => ['u-margin__bottom--3']
])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'right'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'right'
    ])
    @endbutton

@endgroup

@group([
    'justifyContent' => 'space-between',
    'classList' => ['u-margin__bottom--3']
])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'space-between'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'space-between'
    ])
    @endbutton

@endgroup

@group([
    'justifyContent' => 'space-around',
    'classList' => ['u-margin__bottom--3']
])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'space-around'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'space-around'
    ])
    @endbutton

@endgroup

@group([
    'justifyContent' => 'space-evenly',
    'classList' => ['u-margin__bottom--3']
])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'space-evenly'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'space-evenly'
    ])
    @endbutton

@endgroup

Align items

Align the elements within the group vertcially in relation to each other.

<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--align-items-start" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="start" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">start</span></span></button>
  <div style="height:200px; width:100%; background-color: #e5e5e5;"></div>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--align-items-center" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">center</span></span></button>
  <div style="height:200px; width:100%; background-color: #e5e5e5;"></div>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--align-items-end" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="end" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">end</span></span></button>
  <div style="height:200px; width:100%; background-color: #e5e5e5;"></div>
</div>

@group([
    'classList' => ['u-margin__bottom--3'],
    'alignItems' => 'start'
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'start'
    ])
    @endbutton
    <div style="height:200px; width:100%; background-color: #e5e5e5;">
    </div>
@endgroup

@group([
    'classList' => ['u-margin__bottom--3'],
    'alignItems' => 'center'
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'center'
    ])
    @endbutton
     <div style="height:200px; width:100%; background-color: #e5e5e5;">
    </div>


@endgroup

@group([
    'classList' => ['u-margin__bottom--3'],
    'alignItems' => 'end'
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'end'
    ])
    @endbutton
    <div style="height:200px; width:100%; background-color: #e5e5e5;">
    </div>
@endgroup

Align items

Align the elements within the group vertcially in relation to the group. For this to have any affect, the group must have an active flex-wrap.

<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--align-content-start c-group--flex-wrap-wrap" style="height:200px;" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="start" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">start</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="start" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">start</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--align-content-center c-group--flex-wrap-wrap" style="height:200px;" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">center</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">center</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--align-content-end c-group--flex-wrap-wrap" style="height:200px;" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="end" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">end</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="end" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">end</span></span></button>
</div>

@group([
    'classList' => ['u-margin__bottom--3', 'u-color__bg--lighter'],
    'alignContent' => 'start',
    'wrap' => 'wrap',
    'attributeList' => [
        'style' => 'height:200px;'
    ]
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'start'
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'start'
    ])
    @endbutton

@endgroup

@group([
    'classList' => ['u-margin__bottom--3', 'u-color__bg--lighter'],
    'alignContent' => 'center',
    'wrap' => 'wrap',
    'attributeList' => [
        'style' => 'height:200px;'
    ]
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'center'
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'center'
    ])
    @endbutton

@endgroup

@group([
    'classList' => ['u-margin__bottom--3', 'u-color__bg--lighter'],
    'alignContent' => 'end',
    'wrap' => 'wrap',
    'attributeList' => [
        'style' => 'height:200px;'
    ]
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'end'
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'end'
    ])
    @endbutton

@endgroup

Flex

Changes how the container flexes its content.

<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--display-flex" style="height:200px;" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">flex</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">flex</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--display-inline-flex" style="height:200px;" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="inline-flex" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">inline-flex</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="inline-flex" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">inline-flex</span></span></button>
</div>

@group([
    'classList' => ['u-margin__bottom--3', 'u-color__bg--lighter'],
    'display' => 'flex',
    'attributeList' => [
        'style' => 'height:200px;'
    ]
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'flex'
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'flex'
    ])
    @endbutton

@endgroup

@group([
    'classList' => ['u-margin__bottom--3', 'u-color__bg--lighter'],
    'display' => 'inline-flex',
    'attributeList' => [
        'style' => 'height:200px;'
    ]
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'inline-flex'
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'inline-flex'
    ])
    @endbutton

@endgroup

Wrap

Wrap decides how the elements will move around. Lower the viewport to see how the elements behave.

<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-wrap-wrap" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-1" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">wrap-1</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-2" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">wrap-2</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type=
  "button" aria-label="wrap-3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">wrap-3</span></span></button> <button class=
  "c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-4" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">wrap-4</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-wrap-wrap-reverse" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-reverse-1" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">wrap-reverse-1</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-reverse-2"
  data-component="button"><span class="c-button__label"><span class="c-button__label-text">wrap-reverse-2</span></span></button> <button class=
  "c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-reverse-3" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">wrap-reverse-3</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-reverse-4"
  data-component="button"><span class="c-button__label"><span class="c-button__label-text">wrap-reverse-4</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-wrap-nowrap" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="nowrap-1" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">nowrap-1</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="nowrap-2" data-component=
  "button"><span class="c-button__label"><span class="c-button__label-text">nowrap-2</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md" type=
  "button" aria-label="nowrap-3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">nowrap-3</span></span></button> <button class=
  "c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="nowrap-4" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">nowrap-4</span></span></button>
</div>

@group([
    'classList' => ['u-margin__bottom--3'],
    'wrap' => 'wrap',

])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'wrap-1'
    ])
    @endbutton
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'wrap-2'
    ])
    @endbutton
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'wrap-3'
    ])
    @endbutton
        @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'wrap-4'
    ])
    @endbutton
@endgroup

@group([
    'classList' => ['u-margin__bottom--3'],
    'wrap' => 'wrap-reverse',

])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'wrap-reverse-1'
    ])
    @endbutton
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'wrap-reverse-2'
    ])
    @endbutton
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'wrap-reverse-3'
    ])
    @endbutton
        @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'wrap-reverse-4'
    ])
    @endbutton
@endgroup

@group([
    'classList' => ['u-margin__bottom--3'],
    'wrap' => 'nowrap',

])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'nowrap-1'
    ])
    @endbutton
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'nowrap-2'
    ])
    @endbutton
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'nowrap-3'
    ])
    @endbutton
        @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'nowrap-4'
    ])
    @endbutton
@endgroup

Flex grow

<div class="c-group u-margin__bottom--3 u-width--100 c-group--horizontal c-group--flex-grow" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex-grow" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">flex-grow</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="no flex-grow" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">no flex-grow</span></span></button>
</div>

@group([
    'classList' => ['u-margin__bottom--3', 'u-width--100'],
    'flexGrow' => true
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'flex-grow'
    ])
    @endbutton
@endgroup

@group([
    'classList' => ['u-margin__bottom--3'],
    'flexGrow' => false

])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'no flex-grow'
    ])
    @endbutton
@endgroup

Flex shrink

Resize the viewport to see how the elements behave

<div class="c-group u-margin__bottom--3 c-group--horizontal" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex shrink" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">flex shrink</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-shrink-none" data-component="group">
  <button class="c-button c-button__filled c-button__filled--primary c-button--md" style="width:300px;max-width:unset;" type="button" aria-label="no flex-shrink" data-component="button"><span class=
  "c-button__label"><span class="c-button__label-text">no flex-shrink</span></span></button>
</div>

@group([
    'classList' => ['u-margin__bottom--3'],
    'flexShrink' => true,
])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'flex shrink'
    ])
    @endbutton
@endgroup

@group([
    'classList' => ['u-margin__bottom--3'],
    'flexShrink' => false,

])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'no flex-shrink',
        'attributeList' => [
            'style' => 'width:300px;max-width:unset;'
        ]
    ])
    @endbutton
@endgroup

API

Parameter	Default	Type	Description
direction	horizontal	string	-
justifyContent		string	-
jusitifyContent		string	-
alignItems		string	-
alignContent		string	-
display		string	-
wrap		string	-
flexGrow	false	boolean	-
flexShrink	true	boolean	-
gap		string\|integer	-
fluidGrid	null	string\|integer\|boolean\|null	-
columns	null	string\|integer\|null	-
normalizeChildren	true	boolean	-
fullWidth	false	boolean	-
flexWrap	false	string\|boolean	-

CSS API

Variable	Default	Type	Values	Description
--c-group--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-group--border-radius	var(--border-radius)	range	-	Border Radius
--c-group--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-group--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-group--shadow-color	var(--shadow-color)	rgba	-	Shadow Color

Similar components

Logotype Hero Typography