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
| Name | Type | Description |
|---|---|---|
| id | string | The id of the content card |
| link | string | Specifies the link to display the content card component as a clickable navigation card. |
| linkTitle | string | Specifies the title of the link to display the content card component as a clickable navigation card. |
| classes | string | Classes to add to the content card component. |
| yellow | boolean | Displays the content card with a highlighted (yellow) background. Default value is false |
| contentHTML | string | HTML to use within the content card. |
Navigation 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
| Name | Type | Description |
|---|---|---|
| id | string | The id of the content card |
| link | string | Specifies the link to display the content card component as a clickable navigation card. |
| linkTitle | string | Specifies the title of the link to display the content card component as a clickable navigation card. |
| classes | string | Classes to add to the content card component. |
| yellow | boolean | Displays the content card with a highlighted (yellow) background. Default value is false |
| contentHTML | string | HTML 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
| Name | Type | Description |
|---|---|---|
| id | string | The id of the content card |
| link | string | Specifies the link to display the content card component as a clickable navigation card. |
| linkTitle | string | Specifies the title of the link to display the content card component as a clickable navigation card. |
| classes | string | Classes to add to the content card component. |
| yellow | boolean | Displays the content card with a highlighted (yellow) background. Default value is false |
| contentHTML | string | HTML to use within the content card. |