Cards

Individual, wide cards

The examples below show individual cards with various background colours applied. These cards will fit to the full width of the container that they're in, so are more suitable where you have a lot of text to fit in.

<div class="card">
     <h3>Card title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="card bg-purple">
     <h3>Card title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="card bg-green">
     <h3>Card title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="card bg-yellow">
     <h3>Card title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="card bg-orange">
     <h3>Card title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="card bg-red">
     <h3>Card title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Multiple cards in columns

These cards are wrapped inside cards-container. On mobile, these look the same as the cards above. However, on a desktop you'll see that the cards inside the cards-container have split into columns. If you have multiple bits of information to add but nothing too text-heavy, this is a nice way to arrange it.

The code below contains four cards. To add or remove cards, you will need to look closely at the code and use everything on this page eto help you spot where each card opens and closes. If you're not HTML savvy may find it easier to copy your code into a text editor such as Sublime - it's free, and will allow you structure the code properly so you can clearly spot any errors.

<div class="cards-container">
     <div class="card">
          <h3>Card title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
     <div class="card">
          <h3>Card title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
     <div class="card">
          <h3>Card title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
</div>

Nudge cards

Want something a little less neat and tidy? You can use the cards-nudge class in combination with the cards-container class to make every second card drop down below the previous one. Add in some background classes to bring the focus onto one card specifically.

<div class="cards-container cards-nudge">
     <div class="card">
          <h3>Card title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
     <div class="card bg-blue">
          <h3>Card title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
</div>

Adding images to a card

Standard images

Proper easy, this one. Just upload your image and then pop it inside a card. No extra classes needed.

Card title

This card shows what it looks like when the image as placed as the first item inside the card.

Card title

This card shows what it looks like when the image as placed as the second item inside the card.

<div class="cards-container">
     <div class="card">
          <img alt="Image description" src="https://images.unsplash.com/photo-1666087918136-54263acfd993" />
          <h3>Card title</h3>
          <p>Lorem ipsum</p>
     </div>

     <div class="card bg-black">
          <img alt="Image description" src="https://images.unsplash.com/photo-1666087918136-54263acfd993" />
          <h3>Card title</h3>
          <p>Lorem ipsum</p>
     </div>
</div>

Background images

You can also set the image to be the background of the card. Just add the card-bg class to your image and you're set. Set any background colour of your choice - the image will be faded over the top!

It's better to use the cards-center class here as well, it just looks a bit nicer.

Card title

Lorem ipsum

Card title

Lorem ipsum

Card title

Lorem ipsum

Card title

Lorem ipsum

<div class="cards-container cards-center">
     <div class="card bg-black">
          <img alt="Image description" class="card-bg" src="https://images.unsplash.com/photo-1666087918136-54263acfd993" />
          <h3>Card title</h3>
          <p>Lorem ipsum</p>
     </div>

     <div class="card bg-blue">
          <img alt="Image description" class="card-bg" src="https://images.unsplash.com/photo-1666087918136-54263acfd993" />
          <h3>Card title</h3>
          <p>Lorem ipsum</p>
     </div>

     <div class="card bg-red">
          <img alt="Image description" class="card-bg" src="https://images.unsplash.com/photo-1666087918136-54263acfd993" />
          <h3>Card title</h3>
          <p>Lorem ipsum</p>
     </div>

     <div class="card bg-red">
          <img alt="Image description" class="card-bg" src="https://images.unsplash.com/photo-1666087918136-54263acfd993" />
          <h3>Card title</h3>
          <p>Lorem ipsum</p>
     </div>
</div>

Circular images

Card title

This card shows what it looks like when the image is placed as the first item inside the card.

Card title

This card shows what it looks like when the image is placed as the second item inside the card.

Clickable cards

Link your entire card by swapping the div tag for an a tag.

This one is a bit trickier when creating the content inside - you'll need to use a span for each item, rather than the usual h3 or p. This is because the editor will 'tidy up' the code and wrap everything in the link, so you'll end up with a linked card, a linked header, a linked paragraph, etc. If in doubt, just copy the code from the textarea below.

Card title Lorem ipsum

<a class="card" href="https://www.youtube.com/shorts/EWaFkBi4knM">
     <span class="h3">Card title</span>
     <span>Lorem ipsum</span>
</a>

Card title Lorem ipsum Card title Lorem ipsum

<div class="cards-container cards-nudge cards-center">
     <a class="card bg-blue" href="https://www.youtube.com/shorts/EWaFkBi4knM">
          <img alt="Image description" class="card-bg" src="https://images.unsplash.com/photo-1666087918136-54263acfd993" />
          <span class="h3">Card title</span>
          <span>Lorem ipsum</span>
     </a>
     <a class="card bg-black" href="https://www.youtube.com/shorts/EWaFkBi4knM">
          <img alt="Image description" class="card-bg" src="https://images.unsplash.com/photo-1666087918136-54263acfd993" />
          <span class="h3">Card title</span>
          <span>Lorem ipsum</span>
     </a>
</div>