Tile

Tiles 

<div class="c-tile__container">
        <div 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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1500&amp;q=80)" data-uid="678b08d860f92">
    <div class="c-tile__content">
        
    </div>
</div>

        <div class="c-tile__item c-tile u-color__bg--warning c-tile__item--width c-tile__item--height" data-uid="678b08d860fe6">
    <div class="c-tile__content">
        
    </div>
</div>

        <div class="c-tile__item c-tile u-color__bg--danger c-tile__item--width c-tile__item--height" data-uid="678b08d861016">
    <div class="c-tile__content">
        
    </div>
</div>

        <div class="c-tile__item c-tile u-color__bg--success c-tile__sizer c-tile__item--width c-tile__item--height" data-uid="678b08d861040">
    <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: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Tile/tile.json