Cards

Pick a card, any card
Coded for inclusion

Using a list tag gives screen reader users to see how many cards are available, and to easily move from card to card
We ensure that each card has a h2 tag, so that screen reader users receive context
How they look

320 x 568
View code
    <ul class="gg-c-cards gg-u-@l:grid--3-col gg-u-@m:grid--2-col">
  <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>
          <p>Thanks a bunch. Hi there. Bob's your uncle. Run by you. Freedom. Save yourself a few bob. You’re always in control. Easy peasy. We're chuffed to be uSwitch Network of the Year.</p>
        </div>
        <p class="gg-c-cards__label" aria-label="Category">
          Label
        </p>
      </article>
    </a>
  </li>

  <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>
          <p>Thanks a bunch. Hi there. Bob's your uncle. Run by you. Freedom. Save yourself a few bob. You’re always in control. Easy peasy. We're chuffed to be uSwitch Network of the Year.</p>
        </div>
        <p class="gg-c-cards__label" aria-label="Category">
          Label
        </p>
      </article>
    </a>
  </li>

  <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>
          <p>Thanks a bunch. Hi there. Bob's your uncle. Run by you. Freedom. Save yourself a few bob. You’re always in control. Easy peasy. We're chuffed to be uSwitch Network of the Year.</p>
        </div>
        <p class="gg-c-cards__label" aria-label="Category">
          Label
        </p>
      </article>
    </a>
  </li>

  <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>
          <p>Thanks a bunch. Hi there. Bob's your uncle. Run by you. Freedom. Save yourself a few bob. You’re always in control. Easy peasy. We're chuffed to be uSwitch Network of the Year.</p>
        </div>
        <p class="gg-c-cards__label" aria-label="Category">
          Label
        </p>
      </article>
    </a>
  </li>

  <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>
          <p>Thanks a bunch. Hi there. Bob's your uncle. Run by you. Freedom. Save yourself a few bob. You’re always in control. Easy peasy. We're chuffed to be uSwitch Network of the Year.</p>
        </div>
        <p class="gg-c-cards__label" aria-label="Category">
          Label
        </p>
      </article>
    </a>
  </li>
</ul>