Using the Tile Component

Overview

The Tile Component is a versatile, reusable UI element. It’s designed to be flexible and adaptable, capable of serving a variety of functions in a User interface. The Tile Component displays content, acts as a clickable or selectable element, and houses an icon.

It’s designed to group related information in flexible containers and can contain text, images, and/or a block of color. The usage guidance for the Tile Component is intentionally high-level, focusing specifically on the tile’s structure and responsiveness to the grid. It lacks pre-set styles for the content, allowing for the display of a wide variety of content. This flexibility makes tiles suitable for various use cases, such as displaying feature highlights, providing navigation options, or presenting data summaries, including information, getting started guides, how-to guides, and more.

CSS class definitions

The Tile Component consists of the following classes:

.tile

This is the base class for the Tile Component. It sets up the basic appearance and layout of the tile, including its size, padding, background color, and border radius. It also sets up some default styles for when the tile is in focus.

.tile-clickable and .tile-selectable

These classes are modifiers for the base .tile class. Use them to make the tile behave as a clickable or selectable element, respectively. These classes adjust the padding, border, margin, font properties, and cursor style of the tile. They also set up hover and focus styles.

.tile-icon

Use this class for an icon within the tile to position it and set its color. It also includes styles for a inactive icon.

How to use the Tile Component

To use the Tile Component, you need to add the .tile class to an HTML element. If you want the tile to be clickable or selectable, add the .tile-clickable or .tile-selectable class as well. If you want to include an icon in the tile, add an element with the .tile-icon class inside the tile.

<div class="tile">
    <p>Basic Tile Content</p>
</div>

<a class="tile tile-clickable">
    <p>Clickable Tile Content</p>
</a>

<a class="tile tile-selectable">
    <p>Selectable Tile Content</p>
</a>

Examples using the Tile Component

Note

When a tile isn’t clickable, you must use a <div> tag. Use a <a> tag only when turning the tile into a clickable element.