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.

<!-- group.blade.php -->
<div class="c-group c-group--shadow c-group--horizontal" data-uid="69f0d05c70eb4" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Search" data-uid="69f0d05c70dcb" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c70e2b" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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.

<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d05c712fc" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Option One" data-uid="69f0d05c7122a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71286" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c712c4" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-left" data-uid="69f0d05c719f9" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="left" data-uid="69f0d05c71969" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c719bb" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71ab1" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-uid="69f0d05c71a37" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71a7b" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71b57" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="right" data-uid="69f0d05c71ae8" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71b20" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71bf5" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-between" data-uid="69f0d05c71b8c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71bc2" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71c8f" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-around" data-uid="69f0d05c71c29" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71c5e" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71d27" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-evenly" data-uid="69f0d05c71cc2" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c71cf7" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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.

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--align-items-start" data-uid="69f0d05c7215c" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="start" data-uid="69f0d05c72115" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c721cc" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-uid="69f0d05c72196" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c7223e" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="end" data-uid="69f0d05c72201" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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.

<!-- group.blade.php -->
<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-uid="69f0d05c726ef" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="start" data-uid="69f0d05c72668" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c726b4" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c7279a" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-uid="69f0d05c7272d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c72766" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c72836" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="end" data-uid="69f0d05c727d1" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c72805" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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.

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--display-flex" style="height:200px;" data-uid="69f0d05c72c49" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex" data-uid="69f0d05c72bc6" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c72c10" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c72d0a" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="inline-flex" data-uid="69f0d05c72c98" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c72cd4" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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.

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-wrap-wrap" data-uid="69f0d05c73384" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-1" data-uid="69f0d05c73292" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c732de" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73319" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73350" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73483" 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-uid="69f0d05c733ba" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c733ef" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73421" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73453" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73576" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="nowrap-1" data-uid="69f0d05c734b5" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c734e7" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73517" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73547" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 u-width--100 c-group--horizontal c-group--flex-grow" data-uid="69f0d05c73998" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex-grow" data-uid="69f0d05c73946" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73a09" 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-uid="69f0d05c739d4" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal" data-uid="69f0d05c73dfa" data-component="group">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex shrink" data-uid="69f0d05c73db0" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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-uid="69f0d05c73e72" 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-uid="69f0d05c73e36" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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	Description
direction	horizontal	What direction to group (horizontal or vertical)
jusitifyContent		Justify the content to either position (ex. left, center, right)
alignItems		Alignment of the content items (ex. center)
alignContent		Alignment of the content (ex. end)
display		-
wrap		Wrap the content (ex. nowrap, wrap, wrap-reverse)
flexGrow	false	Allow to grow the content within the group
flexShrink	true	Allow to shrink the content within the group
gap		A number between 1-10 that sets the gap between flexed elements.
fluidGrid		Uses flexbox and media queries to determine amount of items per row. Can be a number between 1-4 which will determine the maximum amount of items per row.
columns		Number of items per row. (number between 1-12)

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