Skip to main content

Tile

Component status:Beta
A tile is a container that groups an optional image or icon with a title into a single unit.

Tile Variants#

Default#

<div class="bux-tile">
<a class="bux-tile__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
<div class="bux-tile__content">
<i class="bux-tile__icon icon-check-circle"></i>
<a class="bux-tile__text" href="http://example.com">This is a tile</a>
</div>
</div>

Left Aligned#

<div class="bux-tile bux-tile--left">
<a class="bux-tile__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
<div class="bux-tile__content">
<i class="bux-tile__icon icon-check-circle"></i>
<a class="bux-tile__text" href="http://example.com">This is a tile that is left aligned</a>
</div>
</div>

Image Tile#

<div class="bux-tile">
<a class="bux-tile__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
<img class="bux-tile__image" alt="This is example alt text" src="https://placeimg.com/400/225/animals">
<div class="bux-tile__content">
<a class="bux-tile__text" href="http://example.com">This is a tile with an image</a>
</div>
</div>

Square Image Tile#

<div class="bux-tile">
<a class="bux-tile__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
<div class="bux-tile__image-sq-wrapper">
<img class="bux-tile__image bux-tile__image-sq" alt="This is example alt text" src="https://placeimg.com/400/225/animals">
</div>
<div class="bux-tile__content">
<a class="bux-tile__text" href="http://example.com">This is a tile with a 1:1 image ratio</a>
</div>
</div>

Tile with Text#

An optional text field is currently available in the Default Icon and Image tiles.

This is a tile

This is just a little bit of optional text

<div class="bux-tile">
<a class="bux-tile__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
<div class="bux-tile__content">
<i class="bux-tile__icon icon-check-circle"></i>
<a class="bux-tile__text" href="http://example.com">This is a tile</a>
<p class="bux-tile__body"> This is just a little bit of optional text</p>
</div>
</div>

When to use a Tile#

The primary purpose of a tile is a single call-to-action. Therefore, the entire container of the tile is clickable to one destination.

When to use something else#

If you have multiple calls to action or need more details then the Card component is better to use.

Implementation notes#

In the base implementation the entire tile functions as a link by utilizing an empty anchor tag. This anchor tag is hidden to keyboard and screen reader users but is styled in a manner such that it remains clickable via a pointer device.

Anchor tag that makes the tile function as link
<a class="bux-tile__link" href="{{ tile_url }}" aria-hidden="true" tabindex="-1"></a>

If you do not want the entire tile to function as a link and only want the tile text to be linked you can remove this anchor tag.

It is important to note that if you want the entire tile to function as a link that the link is also keyboard and screen reader accessible somewhere else in the tile (i.e. the tile text).

The default state of the tile provides a centered icon along with text. If you would like the icon and text to be left-aligned you can utilize a modifier.

Left-aligned tile using modifier
<div class="bux-tile bux-tile--left"></div>

Accessibility#

Determine whether or not your icon or image is decorative or informative. If decorative, you can utilize alt="". If informative, provide alternative text that conveys its purpose or meaning.

As noted in the implementation notes the default state of the tile provides an empty anchor tag that serves to make the entire tile a link. If you choose to utilize this default state you must make sure that the tile text links to the same location.