Group
Horizontal group
Simply groups elements.
<!-- group.blade.php -->
<div class="c-group c-group--horizontal" data-uid="6638ace1df14e">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="Search" data-uid="6638ace1df0ac">
<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="6638ace1df0fa">
<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'
])
@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="6638ace1df6e1">
<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="6638ace1df649">
<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="6638ace1df682">
<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="6638ace1df6b4">
<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',
'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="6638ace1dfb7c">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="left" data-uid="6638ace1dfb25">
<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="6638ace1dfb53">
<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="6638ace1dfc0e">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="6638ace1dfbb9">
<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="6638ace1dfbe5">
<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="6638ace1dfc8e">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="right" data-uid="6638ace1dfc39">
<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="6638ace1dfc63">
<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="6638ace1dfd0b">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-between" data-uid="6638ace1dfcb8">
<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="6638ace1dfce2">
<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="6638ace1dfd97">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-around" data-uid="6638ace1dfd35">
<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="6638ace1dfd6c">
<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="6638ace1dfe15">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="space-evenly" data-uid="6638ace1dfdc4">
<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="6638ace1dfdee">
<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'
])
@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="6638ace1e01d0">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="6638ace1e01a6">
<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="6638ace1e021c">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="6638ace1e01f7">
<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="6638ace1e0277">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="6638ace1e0240">
<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'
])
@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="6638ace1e0932">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="start" data-uid="6638ace1e08d1">
<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="6638ace1e08ff">
<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="6638ace1e09b9">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="center" data-uid="6638ace1e0962">
<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="6638ace1e098e">
<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="6638ace1e0a37">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="end" data-uid="6638ace1e09e5">
<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="6638ace1e0a0f">
<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'
])
@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="6638ace1e0e5e">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex" data-uid="6638ace1e0e06">
<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="6638ace1e0e35">
<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="6638ace1e0ede">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="inline-flex" data-uid="6638ace1e0e8c">
<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="6638ace1e0eb6">
<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'
])
@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="6638ace1e1367">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="wrap-1" data-uid="6638ace1e12cb">
<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="6638ace1e12f5">
<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="6638ace1e131c">
<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="6638ace1e1342">
<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="6638ace1e141e">
<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="6638ace1e138d">
<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="6638ace1e13b2">
<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="6638ace1e13d6">
<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="6638ace1e13fa">
<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="6638ace1e14df">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="nowrap-1" data-uid="6638ace1e1442">
<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="6638ace1e146c">
<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="6638ace1e1490">
<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="6638ace1e14b3">
<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'
])
@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="6638ace1e18e1">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex-grow" data-uid="6638ace1e18ae">
<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="6638ace1e1954">
<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="6638ace1e191e">
<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'
])
@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="6638ace1e1cb3">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" aria-label="flex shrink" data-uid="6638ace1e1c81">
<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="6638ace1e1d0b">
<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="6638ace1e1cdd">
<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'
])
@endbutton
@endgroup
@group([
'classList' => ['u-margin__bottom--3'],
'flexShrink' => false,
])
@button([
'color' => 'primary',
'size' => 'md',
'text' => 'no flex-shrink',
'attributeList' => [
'style' => 'width:300px;max-width:unset;'
]
])
@endbutton
@endgroup
Blade component parameters
Key | Default value | Type | Available values | Description |
direction | horizontal | string | - | What direction to group (horizontal or vertical) |
jusitifyContent | string | - | Justify the content to either position (ex. left, center, right) | |
alignItems | string | - | Alignment of the content items (ex. center) | |
alignContent | string | - | Alignment of the content (ex. end) | |
display | string | - | - | |
wrap | string | - | Wrap the content (ex. nowrap, wrap, wrap-reverse) | |
flexGrow | false | boolean | - | Allow to grow the content within the group |
flexShrink | true | boolean | - | Allow to shrink the content within the group |
gap | string | - | A number between 1-10 that sets the gap between flexed elements. | |
fluidGrid | false | boolean | - | Uses flexbox and media queries to determine amount of items per row. |
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. |