Back to the pattern library

Card: Card With Background

Cards are used to group discrete pieces of information.

Example

Example

HTML

<article class="coop-c-card">
    <div class="coop-c-card__content  coop-c-card__content--background">
        <p class="coop-u-margin-x">Next pay day</p>
        <h3 class="coop-c-card__title h2">Thursday 02 August</h3>
        <p><a href="#">See all pay days</a></p>
    </div>
</article>

SCSS

To use this component in your service add this import in your main SCSS file:

@import 'node_modules/@coopdigital/coop-frontend-components/cards/_cards.scss';

Customise this component by following the guide here.

JS

Design and content

Cards should be used:

  • never on their own — always in rows of 2 to 4
  • for discrete grouped pieces of information within a page
  • as links to content that will change over time (such as blog posts) not as navigational signposts to permanent pages

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change