Group
Horizontal group
Simply groups elements.
<!-- group.blade.php -->
<div class="c-group c-group--horizontal" data-uid="67edf41aea9e5">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="Search" data-uid="67edf41aea93b">
<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="67edf41aea98b">
<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
@endgroupVertical group
Simply groups elements, vertically.
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="67edf41aeae35">
<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="67edf41aead8b">
<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="67edf41aeadcf">
<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="67edf41aeae04">
<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
@endgroupJustify 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="67edf41aeb4b6">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="left" data-uid="67edf41aeb42c">
<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="67edf41aeb47e">
<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="67edf41aeb54e">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="67edf41aeb4eb">
<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="67edf41aeb51f">
<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="67edf41aeb5dd">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="right" data-uid="67edf41aeb57e">
<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="67edf41aeb5b0">
<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="67edf41aeb665">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-between" data-uid="67edf41aeb60a">
<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="67edf41aeb639">
<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="67edf41aeb6ec">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-around" data-uid="67edf41aeb692">
<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="67edf41aeb6c0">
<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="67edf41aeb771">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-evenly" data-uid="67edf41aeb718">
<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="67edf41aeb746">
<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
@endgroupAlign 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="67edf41aebb2c">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="67edf41aebaec">
<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="67edf41aebb95">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="67edf41aebb62">
<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="67edf41aebbf6">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="67edf41aebbc6">
<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>
@endgroupAlign 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="67edf41aec088">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="67edf41aec00b">
<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="67edf41aec050">
<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="67edf41aec126">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="67edf41aec0c2">
<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="67edf41aec0f6">
<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="67edf41aec1b9">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="67edf41aec160">
<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="67edf41aec18e">
<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
@endgroupFlex
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="67edf41aec5cb">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex" data-uid="67edf41aec550">
<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="67edf41aec594">
<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="67edf41aec666">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="inline-flex" data-uid="67edf41aec602">
<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="67edf41aec636">
<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
@endgroupWrap
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="67edf41aecc33">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-1" data-uid="67edf41aecb45">
<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="67edf41aecb8f">
<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="67edf41aecbce">
<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="67edf41aecc01">
<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="67edf41aecd1e">
<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="67edf41aecc64">
<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="67edf41aecc95">
<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="67edf41aeccc3">
<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="67edf41aeccf1">
<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="67edf41aecdfe">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="nowrap-1" data-uid="67edf41aecd4c">
<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="67edf41aecd7a">
<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="67edf41aecda6">
<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="67edf41aecdd2">
<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
@endgroupFlex 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="67edf41aed154">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex-grow" data-uid="67edf41aed115">
<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="67edf41aed1bd">
<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="67edf41aed18a">
<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
@endgroupFlex shrink
Allows the child elements to shrink
<!-- group.blade.php -->
<div class="c-group u-margin__bottom--3 c-group--horizontal" data-uid="67edf41aed565">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex shrink" data-uid="67edf41aed529">
<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="67edf41aed5cc">
<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="67edf41aed597">
<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
@endgroupBlade 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. |