Create layout boxes with different backgrounds that can be arranged seamlessly next to each other.
To apply this component, add the .uk-tile
class to a <div>
element. By default, a tile is blank. That is why it is important to add one of the following modifier classes for styling.
Class | Description |
---|---|
.uk-tile-default |
Applies the default tile background. |
.uk-tile-muted |
Applies a muted tile background. |
.uk-tile-primary |
Applies the primary tile background. |
.uk-tile-secondary |
Applies a secondary tile background. |
<div class="uk-tile uk-tile-default"></div>
Default
Muted
Primary
Secondary
<div class="[email protected] uk-grid-collapse uk-text-center" uk-grid>
<div>
<div class="uk-tile uk-tile-default">
<p class="uk-h4">Default</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-muted">
<p class="uk-h4">Muted</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">
<p class="uk-h4">Primary</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">
<p class="uk-h4">Secondary</p>
</div>
</div>
</div>
The Tile component has some padding by default. To remove this or to apply different spacing, add one of the classes from the Padding component.
<div class="uk-tile uk-tile-default uk-padding-large"></div>
Remove
Small
Large
<div class="[email protected] uk-grid-small uk-text-center" uk-grid>
<div>
<div class="uk-tile uk-tile-muted uk-padding-remove">
<p class="uk-h4">Remove</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-primary uk-padding-small">
<p class="uk-h4">Small</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary uk-padding-large">
<p class="uk-h4">Large</p>
</div>
</div>
</div>