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.

ClassDescription
.uk-tile-defaultApplies the default tile background.
.uk-tile-mutedApplies a muted tile background.
.uk-tile-primaryApplies the primary tile background.
.uk-tile-secondaryApplies a secondary tile background.
<div class="uk-tile uk-tile-default"></div>
Copy to clipboard

  • 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>

Preserve color

The .uk-tile-primary and .uk-tile-secondary classes are extending the inverse style from the Inverse component automatically. If you want to prevent this behavior, for example because you are using cards in these sections, add the .uk-preserve-color class.

<div class="uk-preserve-color uk-tile uk-tile-primary"></div>
Copy to clipboard

  • Tile Primary with card

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Tile Secondary with card

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div
  class="uk-child-width-1-2@s uk-grid-collapse uk-grid-match uk-text-center"
  uk-grid
>
  <div>
    <div class="uk-tile uk-tile-primary">
      <div class="uk-margin-medium uk-panel">
        <h3>Tile Primary with card</h3>
      </div>

      <div class="uk-card uk-card-body uk-card-default">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-tile uk-tile-secondary">
      <div class="uk-margin-medium uk-panel">
        <h3>Tile Secondary with card</h3>
      </div>

      <div class="uk-card uk-card-body uk-card-default">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </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-padding-large uk-tile-default"></div>
Copy to clipboard

  • 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-padding-remove uk-tile-muted">
      <p class="uk-h4">Remove</p>
    </div>
  </div>
  <div>
    <div class="uk-tile uk-padding-small uk-tile-primary">
      <p class="uk-h4">Small</p>
    </div>
  </div>
  <div>
    <div class="uk-tile uk-padding-large uk-tile-secondary">
      <p class="uk-h4">Large</p>
    </div>
  </div>
</div>
Customize