Helsingborg Styleguide

Horizontal group

Simply groups elements.

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--horizontal" data-uid="647e323d69fc5">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="Search" data-uid="647e323d69e80">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                Search
            </span>
        
    </span> </button>    
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="Search" data-uid="647e323d69efb">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                Search
            </span>
        
    </span> </button>
</div>

@group(['direction' => 'horizontal'])
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Search',
        'background' => 'default'
    ])
    @endbutton    
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'Search',
        'background' => 'default'
    ])
    @endbutton

@endgroup

Vertical group

Simply groups elements, vertically.

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="647e323d6a30f">
    <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="647e323d6a242">   
     <span class="c-button__label">         
        
                    <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="647e323d6a292">   
     <span class="c-button__label">         
        
                    <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="647e323d6a2d2">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                option three
            </span>
        
    </span> </button>
</div>

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

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

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

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

@endgroup

Justify items

Group elements can be justified.

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="647e323d6a66e">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="left" data-uid="647e323d6a58d">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                left
            </span>
        
    </span> </button>    
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="left" data-uid="647e323d6a607">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                left
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-center" data-uid="647e323d6a7a2">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="647e323d6a6d4">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                center
            </span>
        
    </span> </button>    
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="647e323d6a73d">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                center
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-right" data-uid="647e323d6a90f">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="right" data-uid="647e323d6a825">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                right
            </span>
        
    </span> </button>    
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="right" data-uid="647e323d6a89f">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                right
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-space-between" data-uid="647e323d6aa44">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-between" data-uid="647e323d6a97b">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                space-between
            </span>
        
    </span> </button>    
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-between" data-uid="647e323d6a9e1">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                space-between
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-space-around" data-uid="647e323d6ab30">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-around" data-uid="647e323d6aaa7">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                space-around
            </span>
        
    </span> </button>    
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-around" data-uid="647e323d6aaf5">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                space-around
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--justify-content-space-evenly" data-uid="647e323d6ac55">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-evenly" data-uid="647e323d6ab7e">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                space-evenly
            </span>
        
    </span> </button>    
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-evenly" data-uid="647e323d6abf1">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                space-evenly
            </span>
        
    </span> </button>
</div>

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

@endgroup

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

@endgroup

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

@endgroup

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

@endgroup

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

@endgroup

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

@endgroup

Align items

Group elements can be aligned vertcially.

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="647e323d6aecf">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="647e323d6ae6c">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                start
            </span>
        
    </span> </button>    <div style="height:200px; width:100%; background-color: #e5e5e5;">
    </div>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--align-items-center" data-uid="647e323d6af85">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="647e323d6af2b">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                center
            </span>
        
    </span> </button>     <div style="height:200px; width:100%; background-color: #e5e5e5;">
    </div>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--align-items-end" data-uid="647e323d6b042">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="647e323d6afe1">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                end
            </span>
        
    </span> </button>    <div style="height:200px; width:100%; background-color: #e5e5e5;">
    </div>
</div>

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

Align items

Group elements can be aligned vertcially.

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="647e323d6b335">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="647e323d6b21e">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                start
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="647e323d6b2bd">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                start
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--align-content-center c-group--flex-wrap-wrap" style="height:200px;" data-uid="647e323d6b495">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="647e323d6b3a6">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                center
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="647e323d6b433">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                center
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--align-content-end c-group--flex-wrap-wrap" style="height:200px;" data-uid="647e323d6b5cd">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="647e323d6b4fa">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                end
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="647e323d6b570">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                end
            </span>
        
    </span> </button>
</div>

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

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'start',
        'background' => 'default'
    ])
    @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',
        'background' => 'default'
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'center',
        'background' => 'default'
    ])
    @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',
        'background' => 'default'
    ])
    @endbutton

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

@endgroup

Flex

Sets the flex type

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="647e323d6b87a">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex" data-uid="647e323d6b7ed">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                flex
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex" data-uid="647e323d6b83a">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                flex
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 u-color__bg--lighter c-group--horizontal c-group--display-inline-flex" style="height:200px;" data-uid="647e323d6b948">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="inline-flex" data-uid="647e323d6b8ca">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                inline-flex
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="inline-flex" data-uid="647e323d6b90a">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                inline-flex
            </span>
        
    </span> </button>
</div>

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

    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'flex',
        'background' => 'default'
    ])
    @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',
        'background' => 'default'
    ])
    @endbutton

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

@endgroup

Wrap

Group elements can 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="647e323d6bce9">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-1" data-uid="647e323d6bbd0">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                wrap-1
            </span>
        
    </span> </button>    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-2" data-uid="647e323d6bc19">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                wrap-2
            </span>
        
    </span> </button>    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-3" data-uid="647e323d6bc57">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                wrap-3
            </span>
        
    </span> </button>        <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-4" data-uid="647e323d6bc9a">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                wrap-4
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-wrap-wrap-reverse" data-uid="647e323d6be1b">
    <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="647e323d6bd29">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                wrap-reverse-1
            </span>
        
    </span> </button>    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-reverse-2" data-uid="647e323d6bd6c">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                wrap-reverse-2
            </span>
        
    </span> </button>    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-reverse-3" data-uid="647e323d6bda8">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                wrap-reverse-3
            </span>
        
    </span> </button>        <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-reverse-4" data-uid="647e323d6bde2">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                wrap-reverse-4
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-wrap-nowrap" data-uid="647e323d6bf41">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="nowrap-1" data-uid="647e323d6be53">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                nowrap-1
            </span>
        
    </span> </button>    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="nowrap-2" data-uid="647e323d6be8f">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                nowrap-2
            </span>
        
    </span> </button>    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="nowrap-3" data-uid="647e323d6becf">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                nowrap-3
            </span>
        
    </span> </button>        <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="nowrap-4" data-uid="647e323d6bf09">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                nowrap-4
            </span>
        
    </span> </button>
</div>

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

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

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

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

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

])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'nowrap-1',
        'background' => 'default'
    ])
    @endbutton
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'nowrap-2',
        'background' => 'default'
    ])
    @endbutton
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'nowrap-3',
        'background' => 'default'
    ])
    @endbutton
        @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'nowrap-4',
        'background' => 'default'
    ])
    @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="647e323d6c114">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex-grow" data-uid="647e323d6c0c5">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                flex-grow
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal" data-uid="647e323d6c1d1">
    <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="647e323d6c163">   
     <span class="c-button__label">         
        
                    <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',
        'background' => 'default'
    ])
    @endbutton
@endgroup

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

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

Flex shrink

Allows the child elements to 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="647e323d6c480">
    <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex shrink" data-uid="647e323d6c40c">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                flex shrink
            </span>
        
    </span> </button>
</div>
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal c-group--flex-shrink-none" data-uid="647e323d6c594">
    <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="647e323d6c4e5">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                no flex-shrink
            </span>
        
    </span> </button>
</div>

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

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

])  
    @button([
        'color' => 'primary',
        'size' => 'md',
        'text' => 'no flex-shrink',
        'background' => 'default',
        '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.
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