Cards

Pick a card, any card


How we design them

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

The default behaviour is to display the cards in a single column, then 2, then 3.

View demo Open in new window
320 x 568
View code
<ul class="gg-c-cards">
  <li class="gg-c-cards__item">
    <a href="#" class="gg-c-cards__card">
      <article>
        <div class="gg-c-cards__image" style="background-image: url(../card-image.png);" aria-hidden="true"></div>
        <div class="gg-c-cards__body">
          <h2 class="gg-c-cards__title">
            Card title
          </h2>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 16" class="gg-c-cards__separator">
            <path d="M47.9 10.6c.2-2.2-1.5-4.2-3.8-4.5a7 7 0 0 0-3.8 0c-1.8.3-3.9 1.9-6 1.7-3.2-.6-2.2-6.4-6.4-5.5-2.3.4-2.7 3.6-3.9 4.9L19.7 1c-.5-.8-2.3-1.3-2.8 0-.6 1.5-4.6 12.4-6.2 11.6-.6-.2-.5-3-.8-3.5-.2-1-1-2.2-1.9-2.7-.6-.5-1.9-.1-2.1.6-.9 2.2-2.7 4.1-5 4.9-1.9 1-.4 3.7 1.5 2.7 2.1-.9 3.6-2.2 4.7-3.9.2 1.1.3 2.5.8 3.5.7 1.4 2.1 2 3.5 1.7 2-.3 2.8-2.2 3.7-3.7 1.2-2.5 2.2-5.1 3.4-7.6l3.6 5.5c.4.6.9 1 1.6.8 2.2-.6 2.3-2.5 3.6-4.1.1-.2.4-.9.6-1 1-.3.9 1 1.3 1.6.3 1 1 1.9 1.7 2.6 1.9 1.2 4.4 1.3 6.6.5 1.2-.4 7.8-2.9 7.3.3-.3 1.9 2.9 1.9 3.1-.2z"></path>
          </svg>
          <p>Card description</p>
        </div>
        <p class="gg-c-cards__label" aria-label="Category">
          Label
        </p>
      </article>
    </a>
  </li>
</ul>