<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>
To use this component in your service add this import in your main SCSS file:
Customise this component by following the guide here.
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
We are currently working on this.
Suggest a pattern
Use this form to suggest a new pattern or a change to an existing one.