Skip to main content

Personal tools

Translate

Tiles

Two tile sizes are available for use: normal and small.

Tile Use Guidelines

  • Use: Across the top of the page, horizontally, as a compliment to navigation. These are mobile-friendly.
  • Do not use: These should not be used in a column format, or as an alternate to a single button.

Code

Tiles: Normal Size

<ul class="tiles">
<li><a class="tile button button-lg button-mdblue" href="#"><span class="fas fa-align-left"> </span>Vision Statement</a></li>
<li><a class="tile button button-lg button-mdblue" href="#"><span class="fas fa-book"> </span>Services &amp; Resources</a></li>
<li><a class="tile button button-lg button-mdblue" href="#"><span class="fas fa-wrench"> </span>Compensation Guides</a></li>
</ul>

Tiles: Small Size

<ul class="tiles">
<li><a class="tile-sm button button-lg button-mdblue" href="#"><span class="fas fa-align-left"> </span>Vision Statement</a></li>
<li><a class="tile-sm button button-lg button-mdblue" href="#"><span class="fas fa-book"> </span>Services &amp; Resources</a></li>
<li><a class="tile-sm button button-lg button-mdblue" href="#"><span class="fas fa-wrench"> </span>Compensation Guides</a></li><li><a class="tile-sm button button-lg button-mdblue" href="#"><span class="fas fa-tags"> </span>Position Class </a></li>
</ul>

Helper Classes For Colors

  • Red: button-red
  • Maroon: button-maroon
  • Dark Red: button-dkred
  • Blue: button-blue
  • Medium Blue: button-mdblue
  • Dark Blue: button-dkblue
  • Green: button-green

Adjust Tile Text Size

  • Small: button-sm
  • Medium: button-md
  • Large: button-lg