Tutorialsplane

UIkit Tile


UIkit Tile– Tiles are basically layout boxes which can be arranged side by side. UIkit provides classes to create beautiful tiles with different-different styles and sizes.


UIkit Tile Example

Class uk-tile is used to define the tile body. By default tile looks like blank container so add modifier classes such as uk-tile-default. Here is simple example of UIkit tile.

Example:

<div class="uk-tile uk-tile-default">
	<p class="uk-h4">Default Tile</p>
</div>

Try it »

If you run the above example it will produce output like this-

Background Modifier

Following background modifier classes are available-

Class Description
.uk-tile-default Adds default tile background.
.uk-tile-muted Adds muted tile background.
.uk-tile-primary Adds primary tile background.
.uk-tile-secondary Adds secondary tile background.

Add Padding

You can use the following padding classes to manage the tile padding-

Class Description
.uk-padding Adds default padding.
.uk-padding-small Adds small padding.
.uk-padding-large Adds large padding.

Uikit Tutorial

Component