Group

Horizontal group

error

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">
    <!-- field.blade.php -->
<label id="label_61efa36450d18" class="c-field__text--label" for="input_61efa36450d18">What are you looking for?</label>

<div id="61efa36450d18" class="c-field u-width--50 c-field__text c-field--md c-field--radius-md">

    
    <input id="input_61efa36450d18"
           value=""
           type="text" name="text" aria-labelledby="label_61efa36450d18" data-uid="61efa36450d38"
                      placeholder=""
    />
    <label class="c-field__text--placeholder">
        
    </label>

    <div id="error_input_61efa36450d18_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa36450de2" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa36450ddd">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>

    <button id="61efa36450e7f3.31970093" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa36450e98">   
    <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="61efa364517060.08235738" class="c-button u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa36451716">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Option One
            </span>
        
                    
            
    </span>
</button>
    <button id="61efa364517674.94662545" class="c-button u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa36451773">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Option two
            </span>
        
                    
            
    </span>
</button>
    <button id="61efa364517b94.45899447" class="c-button u-margin--0 u-width--50 c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa364517c4">   
    <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