Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Components

Content card

About

Content cards contain components and text. Against the page background, they help to draw the users attention to important information and help users to navigate content. The cards have many common use cases and applications, all of which can be found on the content cards pattern page.

Content card

What is it?

  • A container with a white background and purple underline.
  • Any components and text can be used within a card.

When not to use it?

  • When it is used in a set of cards for navigation purposes. Instead, use a Navigation card.

Where the adventure starts

Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.


HTML markup
<div class="wmnds-content-card">
  <div class="wmnds-p-sm">
    <h2>Where the adventure starts</h2>
    <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %}

{{
   wmndsContentCard({
      id: null,
      link: "https://designsystem.tfwm.org.uk/components/content-card/",
      linkTitle: "Content Card Component",
      classes: null,
      yellow: false,
      contentHTML: '<div class=\"wmnds-p-sm\">
        <h2>Where the adventure starts</h2>
        <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
      </div>'
   })
}}

Nunjucks properties
NameTypeDescription
idstringThe id of the content card
linkstringSpecifies the link to display the content card component as a clickable navigation card.
linkTitlestringSpecifies the title of the link to display the content card component as a clickable navigation card.
classesstringClasses to add to the content card component.
yellowbooleanDisplays the content card with a highlighted (yellow) background. Default value is false
contentHTMLstringHTML to use within the content card.

What is it?

  • A variation of the Content card where the whole card area is clickable.

When to use it?

  • When it is part of a set of cards used for navigation.
  • When the whole card needs to be clickable.

When not to use it?

  • When multiple interactive components within the card are used. Instead, use a Content card.


HTML markup
<a href="https://designsystem.tfwm.org.uk/components/content-card/" title="" target="_self" class="wmnds-content-card">
  <div class="wmnds-p-sm">
    <h2>Where the adventure starts</h2>
    <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
  </div>
</a>

Nunjucks markup
{% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %}

{{
   wmndsContentCard({
      id: null,
      link: "https://designsystem.tfwm.org.uk/components/content-card/",
      linkTitle: "Content Card Component",
      classes: null,
      yellow: false,
      contentHTML: '<div class=\"wmnds-p-sm\">
        <h2>Where the adventure starts</h2>
        <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
      </div>'
   })
}}

Nunjucks properties
NameTypeDescription
idstringThe id of the content card
linkstringSpecifies the link to display the content card component as a clickable navigation card.
linkTitlestringSpecifies the title of the link to display the content card component as a clickable navigation card.
classesstringClasses to add to the content card component.
yellowbooleanDisplays the content card with a highlighted (yellow) background. Default value is false
contentHTMLstringHTML to use within the content card.

Yellow modifier

What is it?

  • The styling of the card changes to match disruption yellow branding
  • The styling helps users through their journey to major roadworks and events information

When to use it?

  • When you are linking to a disruptions (major roadworks and events) page
  • Only one card should be yellow on a page

When not to use it?

  • When you are not linking to a disruptions (major roadworks and events) page
  • To attract the user's attention to a campaign other than disruptions
  • When there is another yellow card on the page

Where the adventure starts

Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.


HTML markup
<div class="wmnds-content-card wmnds-content-card--yellow">
  <div class="wmnds-p-sm">
    <h2>Where the adventure starts</h2>
    <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %}

{{
   wmndsContentCard({
      id: null,
      link: "https://designsystem.tfwm.org.uk/components/content-card/",
      linkTitle: "Content Card Component",
      classes: null,
      yellow: false,
      contentHTML: '<div class=\"wmnds-p-sm\">
        <h2>Where the adventure starts</h2>
        <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
      </div>'
   })
}}

Nunjucks properties
NameTypeDescription
idstringThe id of the content card
linkstringSpecifies the link to display the content card component as a clickable navigation card.
linkTitlestringSpecifies the title of the link to display the content card component as a clickable navigation card.
classesstringClasses to add to the content card component.
yellowbooleanDisplays the content card with a highlighted (yellow) background. Default value is false
contentHTMLstringHTML to use within the content card.