December 14, 2017

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-

UIkit Tiles

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.

Add Comment

📖 Read More

1. UIkit Notification
2. UIkit Tab