What are content cards?

Content cards are great for adding in things you want to sit side by side, like team photos. They're a useful way of structuring content so that you don't just have a huge vertical list.

How do I add them?

Super easy. Start by opening up a cards-container and then add in your card items. That'll look like this:

<div class="cards-container">
  <div class="card"><p>Card item</p></div>
  <div class="card"><p>Card item</p></div>
  <div class="card"><p>Card item</p></div>
  <div class="card"><p>Card item</p></div>
</div>

From there you can add in images by creating a card-image container. Be aware that any image you add will cropped to a 1:1 aspect ratio (square), so export your image with that in mind.

<div class="cards-container">
  <div class="card">
    <div class="card-image bg-orange">
      <img alt="Bangor Students' Union logo" aria-hidden="true" src="https://assets.prod.unioncloud-internal.com/union_logo/images/4719/original/Logo-Bangor-OffWhite.svg">
    </div>
    <h3>Card title</h3>
    <p>Card item</p>
  </div>
</div>

That would end up looking like this:

Card title

Card item