Cards

The Card components divide content into blocks that make it easier for users to scan. Each card is focused on single topic.

When to use

When you have similar content (blog posts, products, news).
To segment content and make it easy to scan.

When not to use

Do not use cards when users need to compare multiple options.
Cards are less scannable than a list. If the user likely knows what they are searching for, make it quicker for them by displaying chunks of content in a list format.

Card:

Are you an installer?

If you're an MCS certified installer, you can join Go Renewable and start quoting for the renewable technologies your business is certified to install.

HTML

<a href="#" class="card" style="width: 20.59rem">
  <img class="card-img-top" src="../assets/example-images/card-img.jpeg" alt="">
  <div class="card-body">
    <h5 class="card-title">Are you an installer?</h5>
    <p class="card-text">If you're an MCS certified installer, you can join Go Renewable and start quoting for the renewable technologies your business is certified to install.</p>
  </div>
</a>

Article card:

Policy briefing: accelerating retrofit through advice and information

17 May 2024

In November 2023, Energy Saving Trust convened a group of retrofit policy experts. The aim was to consider how effective provision of…

HTML

<a href="#" class="card card-article" style="width: 20.59rem">
  <div class="card-body">
    <hgroup>
      <h5 class="card-title">Policy briefing: accelerating retrofit through advice and information</h5>
      <h6 class="card-subtitle">17 May 2024</h6>
    </hgroup>
    <p class="card-text">In November 2023, Energy Saving Trust convened a group of retrofit policy experts. The aim was to consider how effective provision of…</p>
  </div>
</a>

Category card:

Product

Go Renewable

HTML

<a href="#" class="card card-category" style="width: 20.59rem">
  <div class="card-body">
  <hgroup>
    <h6 class="card-category">Product</h6>
    <h5 class="card-title">Go Renewable</h5>
  </hgroup>
  <img class="card-img-bottom" src="../assets/example-images/card-img.jpeg" alt="">
  </div>
</a>

Simple article card:

Article title link

17 May 2024

Our response to the July 2024 energy price cap announcement, with commentary from Energy Saving Trust chief executive Mike Thornton.

HTML

<div class="card card-simple-article" style="width: 20.59rem">
  <div class="card-body">
    <hgroup>
      <a class="card-title-link" href="#"><h5 class="card-title">Article title link</h5></a>
      <h6 class="card-subtitle mb-3 text-muted">17 May 2024</h6>
    </hgroup>
    <p class="card-text">Our response to the July 2024 energy price cap announcement, with commentary from Energy Saving Trust chief executive Mike Thornton.</p>
  </div>
</div>

Button card:

Avoid these seven common mistakes that waste energy

If you're an MCS certified installer, you can join Go Renewable and start quoting for the renewable technologies your business is certified to install.

Button Button

HTML

<div class="card card-button card-borderless" style="width: 20.59rem">
<img class="card-img-top" src="../assets/example-images/card-img.jpeg" alt="">
  <div class="card-body">
    <h5 class="card-title">Avoid these seven common mistakes that waste energy</h5>
    <p class="card-text">If you're an MCS certified installer, you can join Go Renewable and start quoting for the renewable technologies your business is certified to install.</p>
    <a href="#" class="btn btn-primary">Button</a>
    <a href="#" class="btn btn-secondary">Button</a>
  </div>
</div>

Arrow card:

Avoid these seven common mistakes that waste energy

17 May 2024

If you're an MCS certified installer, you can join Go Renewable and start quoting for the renewable technologies your business is certified to install.

Sign-up now

HTML

<div class="card card-arrow card-borderless" style="width: 18rem;">
<img class="card-img-top" src="../assets/example-images/card-img.jpeg" alt="">
  <div class="card-body">
    <hgroup>
      <h5 class="card-title">Avoid these seven common mistakes that waste energy</h5>
      <h6 class="card-subtitle">17 May 2024</h6>
    </hgroup>
    <p class="card-text">If you're an MCS certified installer, you can join Go Renewable and start quoting for the renewable technologies your business is certified to install.</p>
    <a aria-label="Avoid these seven common mistakes that waste energy: Sign-up now" href="#" class="arrow-link cta-link">Sign-up now</a>
  </div>
</div>