Spots

Icons that are clickable, with a little bit of text at the bottom

How we design them

A spot component (.gg-c-spot) can exist on its own or be nested inside a grid with a class of .gg-c-spots
This component should use only the large, huge, gargantuan and colossal icon sizes

How we use them

The grid defaults to a single column. Change the number of columns using a CSS custom property e.g.

.your-own-class {
    @media (min-width: 600px) {
      --columns: 3;
    }
}

Do not use more than 5 columns

Browser issues

Internet Explorer does not support CSS grid or CSS custom properties. This component uses flexbox to provide a fallback layout for Internet Explorer 11 users

How they look

One spot

View demo

320 x 568

View code

    <div class="gg-c-spot">
  <a href="#">
    <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
      <rect width="100" height="100" />
    </svg>
    <div class="gg-c-spot__content">
      <span class="gg-u-link">Some placeholder text</span>
    </div>
  </a>
</div>

Spots in 4 columns on a large screen (open in a seperate window)

View demo

320 x 568

View code

    <style>
  @media (min-width: 600px) {
    .your-own-class {
        --columns: 4;
    }
  }
</style>

<ul class="gg-c-spots your-own-class">
  <li class="gg-c-spot">
    <a href="#">
      <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
        <rect width="100" height="100" />
      </svg>
      <div class="gg-c-spot__content">
        <span class="gg-u-link">Some placeholder text</span>
      </div>
    </a>
  </li>

  <li class="gg-c-spot">
      <a href="#">
          <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
              <rect width="100" height="100" />
          </svg>
          <div class="gg-c-spot__content">
              <span class="gg-u-link">Other text</span>
          </div>
      </a>
  </li>

  <li class="gg-c-spot">
      <a href="#">
          <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
              <rect width="100" height="100" />
          </svg>
          <div class="gg-c-spot__content">
              <span class="gg-u-link">Lorem Ipsum</span>
          </div>
      </a>
  </li>

  <li class="gg-c-spot">
      <a href="#">
          <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
              <rect width="100" height="100" />
          </svg>
          <div class="gg-c-spot__content">
              <span class="gg-u-link">Text</span>
          </div>
      </a>
  </li>

  <li class="gg-c-spot">
    <a href="#">
      <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
        <rect width="100" height="100" />
      </svg>
      <div class="gg-c-spot__content">
        <span class="gg-u-link">Some longer placeholder filler text</span>
      </div>
    </a>
  </li>

  <li class="gg-c-spot">
    <a href="#">
      <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
        <rect width="100" height="100" />
      </svg>
      <div class="gg-c-spot__content">
        <span class="gg-u-link">Lorem</span>
      </div>
    </a>
  </li>

  <li class="gg-c-spot">
    <a href="#">
      <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
        <rect width="100" height="100" />
      </svg>
      <div class="gg-c-spot__content">
        <span class="gg-u-link">Ipsum</span>
      </div>
    </a>
  </li>

  <li class="gg-c-spot">
    <a href="#">
      <svg class="gg-u-icon gg-u-icon--large gg-c-spot__icon" viewBox="0 0 100 100">
        <rect width="100" height="100" />
      </svg>
      <div class="gg-c-spot__content">
        <span class="gg-u-link">Some placeholder text</span>
      </div>
    </a>
  </li>
</ul>