Group

Horizontal group

Simply groups elements.

The group component resets (removes) margins, and border-radius to make the apperance of horizontally stacked elements.

error_outline
<!-- group.blade.php -->
<div class="c-group c-group--horizontal">
    <!-- field.blade.php -->
<div class="c-field u-width--50 c-field--text c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bec73ae4ea7">
            <label class="c-field__label" for="input_62bec73ae4ea7" id="label_62bec73ae4ea7">
            What are you looking for?
                    </label>
        
    <div class="c-field__inner c-field__inner--text">
                                
            <input id="input_62bec73ae4ea7"
                type="text"
                value=""
                type="text" name="text" aria-labelledby="label_62bec73ae4ea7" data-uid="62bec73ae4eba"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </div>
    </div>

    <button id="62bec73ae5340" class="c-button c-button__filled c-button__filled--primary c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec73ae533a">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Search
            </span>
        
    </span>
</button>
</div>
@group(['direction' => 'horizontal'])

    @field([
        'type' => 'text',
        'attributeList' => [
            'type' => 'text',
            'name' => 'text',
        ],
        'label' => "What are you looking for?",
        'classList' => ['u-width--50']
    ])
    @endfield

    @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">
    <button id="62bec73ae5b5a" class="c-button u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec73ae5b53">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Option One
            </span>
        
    </span>
</button>
    <button id="62bec73ae5bbc" class="c-button u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec73ae5bb7">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Option two
            </span>
        
    </span>
</button>
    <button id="62bec73ae5c32" class="c-button u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec73ae5c2d">   
    <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

Blade component parameters

Key Default value Type Available values Description
direction horizontal string - What direction to group (horizontal or vertical)
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Group/group.json