Helsingborg Styleguide

Horizontal group

Simply groups elements.

<!-- group.blade.php -->
<div class="c-group c-group--horizontal" data-uid="678b06f75b41c">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="Search" data-uid="678b06f75b347">   
     <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" target="_top" type="button" aria-label="Search" data-uid="678b06f75b3a5">   
     <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="678b06f75b567">
    <button class="c-button u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="Option One" data-uid="678b06f75b4bc">   
     <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" target="_top" type="button" aria-label="Option two" data-uid="678b06f75b4fa">   
     <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" target="_top" type="button" aria-label="option three" data-uid="678b06f75b532">   
     <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="678b06f75b63f">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="left" data-uid="678b06f75b5d4">   
     <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" target="_top" type="button" aria-label="left" data-uid="678b06f75b60c">   
     <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="678b06f75b6d3">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="678b06f75b671">   
     <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" target="_top" type="button" aria-label="center" data-uid="678b06f75b6a3">   
     <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="678b06f75b764">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="right" data-uid="678b06f75b703">   
     <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" target="_top" type="button" aria-label="right" data-uid="678b06f75b735">   
     <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="678b06f75b7f1">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-between" data-uid="678b06f75b793">   
     <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" target="_top" type="button" aria-label="space-between" data-uid="678b06f75b7c3">   
     <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="678b06f75b887">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-around" data-uid="678b06f75b81f">   
     <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" target="_top" type="button" aria-label="space-around" data-uid="678b06f75b858">   
     <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="678b06f75b915">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-evenly" data-uid="678b06f75b8b5">   
     <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" target="_top" type="button" aria-label="space-evenly" data-uid="678b06f75b8e7">   
     <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="678b06f75b9b0">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="678b06f75b97e">   
     <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="678b06f75ba0f">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="678b06f75b9e0">   
     <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="678b06f75ba6b">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="678b06f75ba3d">   
     <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="678b06f75bb37">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="678b06f75bad3">   
     <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" target="_top" type="button" aria-label="start" data-uid="678b06f75bb06">   
     <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="678b06f75bbd3">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="678b06f75bb72">   
     <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" target="_top" type="button" aria-label="center" data-uid="678b06f75bba3">   
     <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="678b06f75bc6c">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="678b06f75bc05">   
     <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" target="_top" type="button" aria-label="end" data-uid="678b06f75bc3d">   
     <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="678b06f75bd39">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex" data-uid="678b06f75bcd8">   
     <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" target="_top" type="button" aria-label="flex" data-uid="678b06f75bd0a">   
     <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="678b06f75bdc9">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="inline-flex" data-uid="678b06f75bd6b">   
     <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" target="_top" type="button" aria-label="inline-flex" data-uid="678b06f75bd9b">   
     <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="678b06f75bef6">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-1" data-uid="678b06f75be32">   
     <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" target="_top" type="button" aria-label="wrap-2" data-uid="678b06f75be66">   
     <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" target="_top" type="button" aria-label="wrap-3" data-uid="678b06f75be95">   
     <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" target="_top" type="button" aria-label="wrap-4" data-uid="678b06f75bec7">   
     <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="678b06f75bfdd">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-reverse-1" data-uid="678b06f75bf24">   
     <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" target="_top" type="button" aria-label="wrap-reverse-2" data-uid="678b06f75bf54">   
     <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" target="_top" type="button" aria-label="wrap-reverse-3" data-uid="678b06f75bf83">   
     <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" target="_top" type="button" aria-label="wrap-reverse-4" data-uid="678b06f75bfb1">   
     <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="678b06f75c0ca">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="nowrap-1" data-uid="678b06f75c013">   
     <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" target="_top" type="button" aria-label="nowrap-2" data-uid="678b06f75c042">   
     <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" target="_top" type="button" aria-label="nowrap-3" data-uid="678b06f75c070">   
     <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" target="_top" type="button" aria-label="nowrap-4" data-uid="678b06f75c09e">   
     <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="678b06f75c162">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex-grow" data-uid="678b06f75c132">   
     <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="678b06f75c1bd">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="no flex-grow" data-uid="678b06f75c190">   
     <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="678b06f75c252">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex shrink" data-uid="678b06f75c222">   
     <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="678b06f75c2b3">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" style="width:300px;max-width:unset;" type="button" aria-label="no flex-shrink" data-uid="678b06f75c280">   
     <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

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.

Group

Horizontal group

Simply groups elements.

Vertical group

Simply groups elements, vertically.

Justify items

Group elements can be justified.

Align items

Group elements can be aligned vertcially.

Align items

Group elements can be aligned vertcially.

Flex

Sets the flex type

Wrap

Group elements can wrap

Flex grow

Allows the child elements to grow

Flex shrink

Allows the child elements to shrink

Blade component parameters