Tiles

These clickable areas are how we show a grid of options

How we design them

  • The tiles provide a border, hover effect and a mixin to apply columns
  • Columns are not set via modifiers and need to be set according to the content they contain

Note: The hover shadow effect is shown by using the @media (hover) CSS rule. On touch devices and browsers that don’t support the hover, media query will show the shadow by default.

How they look

1. Default behaviour

The default behaviour is to display the tiles in a single column.

View demo Open in new window
Open in new window
320 x 568
View code 
    <ul class="gg-o-tiles">
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 1</a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 2</a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 3</a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 4</a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 5</a>
  </li>
</ul>

2. Splitting into multiple columns

Columns are applied by using the gg-c-tiles-column-count($scopingClass, $columnCount) mixin. Where $scopingClass is the class used to scope the tile layout, and $columnCount is the number of columns required.

The mixin applies a width to the gg-o-tiles__item. For this to work the mixins must be scoped inside a custom class. If not this will change the value across the whole of your project.

@media (min-width: getSize(67)) {
  @include gg-o-tiles-column-count("s-tiles-custom-layout", 2);
}

@media (min-width: getSize(100)) {
  @include gg-o-tiles-column-count("s-tiles-custom-layout", 3);
}
View demo Open in new window
Open in new window
320 x 568
View code 
    <ul class="gg-o-tiles s-tiles-custom-layout">
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 1</a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 2</a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 3</a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 4</a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">Tile 5</a>
  </li>
</ul>

3. Increasing the size of the shadow

By default the shadows on the tiles use the fine shadow size. But when using on larger tiles this shadow feels unrealistic. Larger shadows (i.e. use the tiny shadow size) can be applied by using the gg-o-tiles--large modifier. This also increases the space between the tiles to accommodate the larger shadow.

View demo Open in new window
Open in new window
320 x 568
View code 
    <ul class="gg-o-tiles gg-o-tiles--large s-large-tiles">
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">
      <svg class="gg-u-icon gg-u-icon--gargantuan" viewBox="0 0 100 100">
        <rect width="100" height="100"></rect>
      </svg>
      Tile 1
    </a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">
      <svg class="gg-u-icon gg-u-icon--gargantuan" viewBox="0 0 100 100">
        <rect width="100" height="100"></rect>
      </svg>
      Tile 2
    </a>
  </li>
  <li class="gg-o-tiles__item">
    <a class="gg-o-tiles__tile" href="">
      <svg class="gg-u-icon gg-u-icon--gargantuan" viewBox="0 0 100 100">
        <rect width="100" height="100"></rect>
      </svg>
      Tile 3
    </a>
  </li>
</ul>