Tile
Tiles
<div class="c-tile__container">
<div id="62bed7fd5076c" 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="62bed7fd5075d">
<div class="c-tile__content">
</div>
</div>
<div id="62bed7fd50a4e" class="c-tile__item c-tile u-color__bg--warning c-tile__item--width c-tile__item--height" data-uid="62bed7fd50a4a">
<div class="c-tile__content">
</div>
</div>
<div id="62bed7fd50a9a" class="c-tile__item c-tile u-color__bg--danger c-tile__item--width c-tile__item--height" data-uid="62bed7fd50a97">
<div class="c-tile__content">
</div>
</div>
<div id="62bed7fd50adb" class="c-tile__item c-tile u-color__bg--success c-tile__sizer c-tile__item--width c-tile__item--height" data-uid="62bed7fd50ad9">
<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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&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. |