Tiles

Tiles are links with extra styling and optional content that can be laid out in a grid.

When to use Tiles

They are best used for landing pages, directories, and other pages where multiple links need equal visual weight.

Usage

Tiles can contain an icon, but no images. They have an outline and can contain any paragraph or heading element element.

Each tile should contain a single <a> element so the entire tile is clickable.

Standard Tiles (3-Column Default)

Standard tiles display 2-4 columns on desktop and collapse to a single column on mobile.


<ul class="tiles-group">
  <li class="tile">
    <a href="#">
      <h2>Tile Title</h2>
      <p>Description text.</p>
    </a>
  </li>
  <li class="tile">...</li>
  <li class="tile">...</li>
</ul>

Centered Tiles with icons (3-Column Default)


<ul class="tiles-group">
  <li class="tile center">
    <a href="#">
      <i class="fa-solid fa-book-open-reader fa-2xl"></i> 
      <h2>Tile Title</h2>
      <p>Description text.</p>
    </a>
  </li>
  <li class="tile center">...</li>
  <li class="tile center">...</li>
</ul>
Option Class

2 columns

tiles-group-2fr

3 columns

tiles-group-3fr

4 columns

tiles-group-4fr

Centered content

center

Tile Colors

Tiles can optionally use brand color classes to provide visual emphasis. Apply the color class directly to the .tile element.


<li class="tile reynolds-red">
  <a href="#">
    <h2>Tile Title</h2>
  </a>
</li>
Color Class Hex
Reynolds Red .reynolds-red #990000
Pyroman Flame .pyroman-flame #D14905
Hunt Yellow .hunt-yellow #FAC800
Genomic Green .genomic-green #6F7D1C
Carmichael Aqua .carmichael-aqua #008473
Innovation Blue .innovation-blue #427E93
Bio Indigo .bio-indigo #4156A1

Examples

Here are some examples of how tiles can be used in different contexts:

Updated

We're glad! Thanks for the feedback.

Website feedback

What is the issue with this page?

We hear you! Thanks for letting us know.