Tile

Create layout boxes with different backgrounds that can be arranged seamlessly next to each other.

Tile

Create layout boxes with different backgrounds that can be arranged seamlessly next to each other.

Usage

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="uk-child-width-1-2@s 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>

Tile and padding

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="uk-child-width-1-3@s 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>