Tiles

Provide a set of related clickable options that are easily glanceable and compareable.

Simple Tile

In it's simplest form, a tile shows a circle containing intials or an icon, alongside a title.

Tiles should have role="button" so that screen readers will recognise them as clickable, and tabindex="0" to provide focus support for keyboards.

{% highlight html %} {% endhighlight %}

Responsive Tiles

Better responsive behaviour can be achieved using the .tile-icon and .tile-text containers.

When using responsive tiles always use .circle-responsive to scale your icon on smaller screens.

{% highlight html %} {% endhighlight %}

Tile rows

Normally tiles are used in rows, we use our grid columns to dictate how many tiles appear in each row at various screen sizes, our tiles should be of equal height so we use the row modifier .row-equal-height to make each tile in a row match.

Be concise when adding additional text. The user will use this information to compare between options.

Tile rows use flexbox for matched height, which may not work in earlier versions of Internet Explorer.

{% highlight html %} {% endhighlight %}

Tiles with unique information

When the option has further information unique to it alone and it is 100% necessary to show it, do so below a hr tag within a p

{% highlight html %} {% endhighlight %}

Benefits of a certain tile

Add a tile-ribbon-benefit div within the tile if benefits of that tile are worth showing to the user. Copy should be kept short as space is limited.

{% highlight html %} {% endhighlight %}

Disabled Tile

Add a tile-disabled class to tile when the option is disabled, providing an explanation to the user as to why they cannot select that option.

{% highlight html %} {% endhighlight %}

Inverse Tiles

On grey backgrounds use the .tile-inverse variant.

{% highlight html %} {% endhighlight %}

Contextual Tile Variants

Add a contextual class convey state within the tile.

{% highlight html %} {% endhighlight %}