Back to the pattern library

Card: Card Group

Cards are used to group discrete pieces of information.

Example

Example

HTML

<div class="coop-l-row">
    <div class="coop-l-column coop-l-small-12 coop-l-medium-6">
        <article class="coop-c-card">
            <a href="#" class="coop-c-card__link">
                <div class="coop-c-card__content">
                    <h3 class="coop-c-card__title">We’re celebrating LGBT history&nbsp;month</h3>
                    <p>We’re also asking all Co-op colleagues which Pride events they’d like to get involved in.</p>

                </div>
            </a>
        </article>

    </div>
    <div class="coop-l-column coop-l-small-12 coop-l-medium-6">
        <article class="coop-c-card">
            <a href="#" class="coop-c-card__link">
                <div class="coop-c-card__content">
                    <h3 class="coop-c-card__title">We’re celebrating LGBT history&nbsp;month</h3>
                    <p>We’re also asking all Co-op colleagues which Pride events they’d like to get involved in.</p>

                </div>
            </a>
        </article>

    </div>
</div>

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