Tile

Tiles 

<div class="c-tile__container">
    <div id="61efb6f81cf85" class="c-tile__item c-tile u-color__bg--info c-tile__item--width2 c-tile__item--height" style="background-image: url(https://images.unsplash.com/photo-1557511560-d07d5f64fd59?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80)" data-uid="61efb6f81cf7c">
    <div class="c-tile__content">
        
    </div>
</div>

    <div id="61efb6f81d18d" class="c-tile__item c-tile u-color__bg--warning c-tile__item--width c-tile__item--height" data-uid="61efb6f81d189">
    <div class="c-tile__content">
        
    </div>
</div>

    <div id="61efb6f81d1f7" class="c-tile__item c-tile u-color__bg--danger c-tile__item--width c-tile__item--height" data-uid="61efb6f81d1f4">
    <div class="c-tile__content">
        
    </div>
</div>

    <div id="61efb6f81d252" class="c-tile__item c-tile u-color__bg--success c-tile__sizer c-tile__item--width c-tile__item--height" data-uid="61efb6f81d24f">
    <div class="c-tile__content">
        
    </div>
</div>
</div>
<div class="c-tile__container">
    @tile([
        "width" => "2",
        "backgroundImage" => "https://images.unsplash.com/photo-1557511560-d07d5f64fd59?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1500&amp;q=80",
        "classList" => [
            'u-color__bg--info'
        ]
    ])
    
    @endtile

    @tile([
        "classList" => [
            'u-color__bg--warning'
        ]
    ])
        
    @endtile

    @tile([
        "classList" => [
            'u-color__bg--danger'
        ]
    ])
    @endtile

    @tile([
        "classList" => [
            'u-color__bg--success',
            "c-tile__sizer"
        ]
    ])
    @endtile
</div>

Blade component parameters

Key Default value Type Available values Description
width string - Array with following keys: largeImage, smallImage, caption and alt
height string - Array with following keys: largeImage, smallImage, caption and alt
backgroundImage string - -
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/Tile/tile.json