Group

Horizontal group

Simply groups elements. 

<!-- group.blade.php -->
<div class="c-group c-group--horizontal" data-uid="6928016a0cc46">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Search" data-uid="6928016a0cb8e">   
     <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="6928016a0cbe3">   
     <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'])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Search'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Search'
    ])
    @endbutton

@endgroup

Vertical group

Simply groups elements, vertically. 

<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6928016a0cdd4">
    <button class="c-button u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Option One" data-uid="6928016a0cd19">   
     <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 u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Option two" data-uid="6928016a0cd66">   
     <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 u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="option three" data-uid="6928016a0cda1">   
     <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',
        'classList' => ['u-margin--0', 'u-width--50']
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Option two',
        'classList' => ['u-margin--0', 'u-width--50']
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'option three',
        'classList' => ['u-margin--0', 'u-width--50']
    ])
    @endbutton

@endgroup

Justify items

Group elements can be justified. 

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-left" data-uid="6928016a0cf78">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="left" data-uid="6928016a0cefe">   
     <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="6928016a0cf42">   
     <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="6928016a0d013">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-uid="6928016a0cfad">   
     <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="6928016a0cfe3">   
     <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="6928016a0d0a4">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="right" data-uid="6928016a0d044">   
     <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="6928016a0d076">   
     <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="6928016a0d133">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-between" data-uid="6928016a0d0d4">   
     <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="6928016a0d105">   
     <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="6928016a0d1cb">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-around" data-uid="6928016a0d16d">   
     <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="6928016a0d19d">   
     <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="6928016a0d257">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="space-evenly" data-uid="6928016a0d1f9">   
     <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="6928016a0d229">   
     <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

Group elements can be aligned vertcially. 

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--align-items-start" data-uid="6928016a0d365">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="start" data-uid="6928016a0d32c">   
     <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="6928016a0d3c9">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-uid="6928016a0d399">   
     <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="6928016a0d428">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="end" data-uid="6928016a0d3f9">   
     <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

Group elements can be aligned vertcially. 

<!-- 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="6928016a0d590">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="start" data-uid="6928016a0d513">   
     <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="6928016a0d55c">   
     <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="6928016a0d62c">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="center" data-uid="6928016a0d5c8">   
     <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="6928016a0d5fc">   
     <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="6928016a0d6c0">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="end" data-uid="6928016a0d660">   
     <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="6928016a0d691">   
     <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

Sets the flex type 

<!-- 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="6928016a0d804">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex" data-uid="6928016a0d796">   
     <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="6928016a0d7d2">   
     <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="6928016a0d89b">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="inline-flex" data-uid="6928016a0d83a">   
     <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="6928016a0d86c">   
     <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

Group elements can wrap 

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-wrap-wrap" data-uid="6928016a0da9f">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-1" data-uid="6928016a0d9b1">   
     <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="6928016a0d9f0">   
     <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="6928016a0da25">   
     <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="6928016a0da6c">   
     <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="6928016a0db9d">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="wrap-reverse-1" data-uid="6928016a0dad4">   
     <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="6928016a0db09">   
     <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="6928016a0db3b">   
     <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="6928016a0db6d">   
     <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="6928016a0dc97">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="nowrap-1" data-uid="6928016a0dbd1">   
     <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="6928016a0dc0f">   
     <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="6928016a0dc3e">   
     <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="6928016a0dc6b">   
     <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

Allows the child elements to grow 

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-grow" data-uid="6928016a0dda8">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex-grow" data-uid="6928016a0dd5f">   
     <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="6928016a0de0e">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="no flex-grow" data-uid="6928016a0dddd">   
     <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'],
    '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

Allows the child elements to shrink 

<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal" data-uid="6928016a0df0b">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="flex shrink" data-uid="6928016a0ded2">   
     <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="6928016a0df7a">
    <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="6928016a0df42">   
     <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

Blade component parameters

Key Default value Type Available values Description
direction horizontal string - What direction to group (horizontal or vertical)
jusitifyContent string - Justify the content to either position (ex. left, center, right)
alignItems string - Alignment of the content items (ex. center)
alignContent string - Alignment of the content (ex. end)
display string - -
wrap string - Wrap the content (ex. nowrap, wrap, wrap-reverse)
flexGrow false boolean - Allow to grow the content within the group
flexShrink true boolean - Allow to shrink the content within the group
gap string - A number between 1-10 that sets the gap between flexed elements.
fluidGrid NULL - 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 NULL - Number of items per row. (number between 1-12)
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Group/group.json