NEWSLETTER HUB|BRANDHUB

We couldn’t find anything that matched your searched term

  • PAGES

  • COMPONENTS

  • Brand guidelines

  • Insights

Documentation

Components

Cards are pieces of elements that serve editorial content. They can be used in several ways and work with strong visual content.

Card basic
Simple

This is the simplest card component, it does not contain a description and only displays a title, a date and a super-title.

Image at top
Placeholder

subhead

This is the card title

21/03/2021

<div class="card" style="width: 288px;">
  <img src="..." alt="..." />
  <div class="card-body pt-4">
    <h3 class="card-subtitle text-secondary">subhead</h3>
    <h2 class="card-title">This is the card title</h2>
    <p class="h4 text-muted card-text">21/03/2021</p>
  </div>
</div>
Image at left
Placeholder

subhead

This is the card title

21/03/2021

<div class="card" style="max-width: 440px;">
  <div class="row g-0">
    <div class="col-auto">
      <img src="..." alt="..." />
    </div>
    <div class="col">
      <div class="card-body py-0 ps-4">
        <h3 class="card-subtitle text-secondary">subhead</h3>
        <h2 class="card-title">This is the card title</h2>
        <p class="h4 text-muted card-text">21/03/2021</p>
      </div>
    </div>
  </div>
</div>
Image at right

subhead

This is the card title

21/03/2021

Placeholder 
<div class="card" style="max-width: 440px;">
  <div class="row g-0">
    <div class="col">
      <div class="card-body py-0 pe-4">
        <h3 class="card-subtitle text-secondary">subhead</h3>
        <h2 class="card-title">This is the card title</h2>
        <p class="h4 text-muted card-text">21/03/2021</p>
      </div>
    </div>
    <div class="col-auto">
      <img src="..." alt="..." />
    </div>
  </div>
</div>
Advanced

The advanced version adds a description to the card, a link (which can also become a button).

Image at top
Placeholder

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content f the card.

secondary link 
<div class="card">
  <img src="..." alt="...">
  <div class="card-body pt-4">
    <h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
    <h2 class="card-title">This is the card title</h2>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the content of the card.</p>
    <a href="#" class="card-link btn btn-link-secondary text-nowrap">
    secondary link
    <i class="icon-east ms-1"></i>
    </a>
  </div>
</div>
Image at left
Placeholder

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

secondary link 
<div class="card">
  <div class="row g-0">
    <div class="col-auto">
      <img src="..." alt="...">
    </div>
    <div class="col">
      <div class="card-body py-0 ps-4">
        <h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
        <h2 class="card-title">This is the card title</h2>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the content of the card.</p>
        <a href="#" class="card-link btn btn-link-secondary text-nowrap">
        secondary link
        <i class="icon-east ms-1"></i>
        </a>
      </div>
    </div>
  </div>
</div>
Image at right

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

secondary link
Placeholder 
<div class="card">
  <div class="row g-0">
    <div class="col">
      <div class="card-body py-0 pe-4">
        <h3 class="card-subtitle text-secondary">
          subhead <span class="text-muted">- 21/03/2021</span>
        </h3>
        <h2 class="card-title">This is the card title</h2>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the content of the card.
        </p>
        <a href="#" class="card-link btn btn-link-secondary text-nowrap">
          secondary link
          <i class="icon-east ms-1"></i>
        </a>
      </div>
    </div>
    <div class="col-auto">
      <img src="..." alt="..." />
    </div>
  </div>
</div>
Card highlight

The "highlight" version uses Publico title levels and can take more prominence in your content stream.

With buttons
Image at top
Placeholder

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

secondary link

secondary link 

<div class="card">
  <img src="..." alt="..." />
  <div class="card-body pt-4">
    <h3 class="card-subtitle text-secondary">
      subhead <span class="text-muted">- 21/03/2021</span>
    </h3>
    <p class="card-title display-5">This is the card title</p>
    <p class="card-text">
      Some quick example text to build on the card title and make up the bulk of
      the content of the card.
    </p>
    <p><a href="#" class="btn btn-secondary">secondary link</a></p>
    <p><a href="#" class="btn btn-outline-secondary">secondary link</a></p>
  </div>
</div>
Image at left
Placeholder

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

secondary link

secondary link 

<div class="card">
  <div class="row g-0">
    <div class="col-auto">
      <img src="..." alt="..." />
    </div>
    <div class="col">
      <div class="card-body py-0 ps-4">
        <h3 class="card-subtitle text-secondary">
          subhead <span class="text-muted">- 21/03/2021</span>
        </h3>
        <p class="card-title display-5">This is the card title</p>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the content of the card.
        </p>
        <p><a href="#" class="btn btn-secondary">secondary link</a></p>
        <p><a href="#" class="btn btn-outline-secondary">secondary link</a></p>
      </div>
    </div>
  </div>
</div>
Image at right

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

secondary link

secondary link

Placeholder 
<div class="card">
  <div class="row g-0">
    <div class="col">
      <div class="card-body py-0 pe-4">
        <h3 class="card-subtitle text-secondary">
          subhead <span class="text-muted">- 21/03/2021</span>
        </h3>
        <p class="card-title display-5">This is the card title</p>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the content of the card.
        </p>
        <p><a href="#" class="btn btn-secondary">secondary link</a></p>
        <p><a href="#" class="btn btn-outline-secondary">secondary link</a></p>
      </div>
    </div>
    <div class="col-auto">
      <img src="..." alt="..." />
    </div>
  </div>
</div>
With link
Image at top
Placeholder

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

secondary link 
<div class="card">
  <img src="..." alt="..." />
  <div class="card-body pt-4">
    <h3 class="card-subtitle">
      subhead <span class="text-muted">- 21/03/2021</span>
    </h3>
    <p class="card-title display-5">This is the card title</p>
    <p class="card-text">
      Some quick example text to build on the card title and make up the bulk of
      the content of the card.
    </p>
    <a href="#" class="card-link btn btn-link-secondary text-nowrap">
      secondary link
      <i class="icon-east ms-1"></i>
    </a>
  </div>
</div>
Image at left
Placeholder

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

secondary link 
<div class="card">
  <div class="row g-0">
    <div class="col-auto">
      <img src="..." alt="..." />
    </div>
    <div class="col">
      <div class="card-body py-0 ps-4">
        <h3 class="card-subtitle text-secondary">
          subhead <span class="text-muted">- 21/03/2021</span>
        </h3>
        <p class="card-title display-5">This is the card title</p>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the content of the card.
        </p>
        <a href="#" class="card-link btn btn-link-secondary text-nowrap">
          secondary link
          <i class="icon-east ms-1"></i>
        </a>
      </div>
    </div>
  </div>
</div>
Image at right

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

secondary link
Placeholder 
<div class="card">
  <div class="row g-0">
    <div class="col">
      <div class="card-body py-0 pe-4">
        <h3 class="card-subtitle text-secondary">
          subhead <span class="text-muted">- 21/03/2021</span>
        </h3>
        <p class="card-title display-5">This is the card title</p>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the content of the card.
        </p>
        <a href="#" class="card-link btn btn-link-secondary text-nowrap">
          secondary link
          <img src="..." alt="..." />
        </a>
      </div>
    </div>
    <div class="col-auto">
      <img src="..." alt="..." />
    </div>
  </div>
</div>
Inside

This alternative integrates the title, super-title, date, description and call to action elements directly into the image overlay. Don't forget to check the contrast level to maintain a good level of accessibility.

with buttons
image in a card

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

light button

light button 

<div class="card text-white">
  <img class="card-img" src="..." alt="..." />
  <div class="card-img-mask"></div>
  <div class="card-img-overlay">
    <h3 class="card-subtitle">subhead - 21/03/2021</h3>
    <p class="card-title display-5">This is the card title</p>
    <p class="card-text">
      Some quick example text to build on the card title and make up the bulk of
      the content of the card.
    </p>
    <p><a href="#" class="btn btn-light">light button</a></p>
    <p class="mb-0">
      <a href="#" class="btn btn-outline-light">light button</a>
    </p>
  </div>
</div>
with link
image in a card

subhead - 21/03/2021

This is the card title

Some quick example text to build on the card title and make up the bulk of the content of the card.

Light link 
<div class="card text-white">
  <img class="card-img" src="..." alt="..." />
  <div class="card-img-mask"></div>
  <div class="card-img-overlay">
    <h3 class="card-subtitle">subhead - 21/03/2021</h3>
    <p class="card-title display-5">This is the card title</p>
    <p class="card-text">
      Some quick example text to build on the card title and make up the bulk of
      the content of the card.
    </p>
    <a href="#" class="card-link btn btn-link-light">
      Light link
      <img src="..." alt="..." />
    </a>
  </div>
</div>
Card link

This version is more compact but allows for a grid of several elements to optimise space.

subhead

This is the card title

secondary link 
<div class="card card-bg">
  <div class="card-body p-4">
    <h3 class="card-subtitle text-muted">subhead</h3>
    <h1 class="card-title mb-5">This is the card title</h1>
    <a href="#" class="card-link btn btn-link-secondary stretched-link">
      secondary link
      <i class="icon-add ms-1"></i>
    </a>
  </div>
</div>