Content cards
About
These are common applications of the content card component.
Map card
What is it?
- A card with an interactive map component.
When to use it?
- When there is a user need for an interactive map to display information.
- When there is an alternative way to view the information on the interactive map.
When not to use it?
- When it is the sole way of presenting the information, you must provide an alternative.
- When the map is a screenshot or image. This is called a static map. Do not use static maps on Transport for West Midlands products.
- When there is no user need for a map, use text description instead.
Driving from bearwood
Consider using City Road and Dudley Road, past City Hospital to head into Birmingham city centre or connect with the ring road.
HTML markup
<div class="wmnds-content-card">
<div class="wmnds-p-md">
<h2 class="wmnds-content-card__title">Driving from bearwood</h2>
<p>Consider using City Road and Dudley Road, past City Hospital to head into Birmingham city centre or connect with the ring road.</p>
<iframe title="Perry Bar Highway Construction Works" width="100%" height="500" src="https://www.arcgis.com/apps/View/index.html?appid=1b6f79c50c81421d92da2bd1ccee27e8" frameborder="0" scrolling="no"></iframe>
</div>
</div>
Button card
What is it?
- A card with several buttons in.
When to use it?
- To direct users to different content relevant to their needs.
- At the end of the main page content. We found that users preferred to split lots of content into smaller, specific pages and that this was the best way to continue the journey after reading the main overview content.
When not to use it?
- To attract the user's attention if there is no benefit to them reading the content.
- To list links within a section or related content. Use the in-line navigation card instead.
Advice to keep moving
HTML markup
<div class="wmnds-content-card">
<div class="wmnds-p-sm">
<h2 class="wmnds-content-card__title">Advice to keep moving</h2>
<ul class="wmnds-content-card__list wmnds-m-b-none">
<li class="wmnds-content-card__list-item">
<a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-card__list-item-btn wmnds-btn--primary">
I drive
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-card__list-item-btn wmnds-btn--primary">
I use the bus
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-card__list-item-btn wmnds-btn--primary">
I use the train
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-card__list-item-btn wmnds-btn--primary">
I use the tram
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-card__list-item-btn wmnds-btn--primary">
I walk or cycle
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-card__list-item-btn wmnds-btn--primary">
I want to visit an attraction or venue
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
Image card
What is it?
- A card with an image in.
When to use it?
- To display an image within a tile.
- When the image complements the text.
When not to use it?
- When the image has text in. This distracts the user and usually fails accessibility criteria.
- When the image is a cartoon or illustration. These are called vector images. Vector images display as poor quality for many users.
Changes to bus services
View the latest changes to bus services in your area.
HTML markup
<div class="wmnds-content-card">
<img class="wmnds-content-card__image" src="https://picsum.photos/id/223/750/250" alt="Street lights with bokeh effect" />
<div class="wmnds-p-sm">
<h2 class="wmnds-content-card__title">Changes to bus services</h2>
<p>View the latest changes to bus services in your area.</p>
</div>
</div>
In-line navigation card
What is it?
- A card with in-text links for navigation of sections and displaying related content.
When to use it?
- To help the user navigate a collection of pages. This is called a section.
- To show related content which meets user needs.
- To help the user navigate a long page using in-text anchors.
- Only use this pattern in a sidebar.
When not to use it?
- When the page links you are listing to form part of a journey or process. The journey should be linear.
- When you are trying to attract the user's attention. This is called a call-to-action.
How to use it
- The group of links must have a title to help users understand what the links are for. For example, 'Related content', 'On this page' or the section name.
- If the card is used to navigate a long page of content, it should be displayed on the left-hand side.
- If the card is used to navigate a set of pages, like a section or related content, it should be displayed on the right-hand side.
- The current page or section being viewed must be inset.
HTML markup
<div class="wmnds-content-card">
<nav class="wmnds-p-sm">
<h3 class="wmnds-content-card__title">Related content</h3>
<ul class="wmnds-content-card__list wmnds-m-b-none">
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Information for drivers</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Information for bus passengers</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Information for tram passengers</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Information for pedestrians</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Getting to venues and attractions</a>
</li>
</ul>
</nav>
</div>
In-line navigation with current page
HTML markup
<div class="wmnds-content-card">
<nav class="wmnds-p-sm">
<h3 class="wmnds-content-card__title">Page contents</h3>
<ul class="wmnds-content-card__list wmnds-m-b-none">
<li class="wmnds-content-card__list-item">
<div class="wmnds-inset-text">
Type something
</div>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Information for drivers</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Information for bus passengers</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Information for tram passengers</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Information for pedestrians</a>
</li>
<li class="wmnds-content-card__list-item">
<a href="#" target="_self" title="Link title" class="wmnds-link">Getting to venues and attractions</a>
</li>
</ul>
</nav>
</div>
Email sign up card
What does it do?
- Allows the user to sign up for updates when information changes on a page.
- Sends personalised updates to users based on their location.
When to use it?
- Use these content tiles on pages where users can sign-up for newsletter updates.
- For a standard newsletter sign up, use the content tile where the text fields expand.
- If you want to capture additional user data, then use the content block which links to an external form, e.g. Campaign Monitor.
When adding a sign up form from Campaign Monitor, you are provided with HTML markup, but make sure not to change any of the generated attributes except for classes. They have been changed in the following examples to avoid accessibility errors.
Collapsed
This is the default state for the email sign up card.
Stay up to date
Receive an email notification when this information changes.
HTML markup
<div class="wmnds-content-card">
<div class="wmnds-p-sm wmnds-col-1">
<h2 class="wmnds-content-card__title">Stay up to date</h2>
<p class="wmnds-m-b-md">Receive an email notification when this information changes.</p>
<form class="js-cm-form wmnds-content-card__form" id="subForm-example-1" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="92D4C54F0FEC16E5ADC2B1904DE9ED1A99364085B43530088A4D2FC306FC12C93064C1C79B7ABC5EE4710A358CB5FBFB9279A45ECC576F3F096FDC1EFB755F64">
<div class="wmnds-m-b-sm">
<label class="wmnds-fe-label" for="fieldEmail--example-1">Email address</label>
<input autocomplete="Email" aria-label="Email" class="js-cm-email-input qa-input-email wmnds-fe-input" id="fieldEmail--example-1" maxlength="200" name="cm-nllddr-nllddr" required="" type="email" />
</div>
<!-- Expanding content -->
<div class="wmnds-content-card__form-collapse">
<div class="wmnds-m-b-sm">
<label class="wmnds-fe-label" for="fieldName--example-1">Name</label>
<input class="wmnds-fe-input" aria-label="Name" id="fieldName--example-1" maxlength="200" name="cm-name" />
</div>
<div class="wmnds-m-b-sm">
<label class="wmnds-fe-label" for="fieldkdyhlr--example-1">Postcode</label>
<p class="wmnds-m-b-sm">We'll use this to send relevant emails to your location</p>
<input class="wmnds-fe-input" aria-label="Home Postcode" id="fieldkdyhlr--example-1" maxlength="200" name="cm-f-kdyhlr" required="" />
</div>
<label class="wmnds-fe-checkboxes__container wmnds-m-t-md">
I agree to WMCA's Privacy Policy
<input class="wmnds-fe-checkboxes__input" aria-required="" id="cm-privacy-consent--example-1" name="cm-privacy-consent" required="" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<input id="cm-privacy-consent-hidden--example-1" name="cm-privacy-consent-hidden" type="hidden" value="true">
</div>
<button class="wmnds-btn wmnds-btn--primary wmnds-m-t-xsm wmnds-col-1">Continue</button>
</form>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>
</div>
</div>
Expanded
The collapsed card will expand when the 'continue' button is pressed/tapped.
Stay up to date
Receive an email notification when this information changes.
HTML markup
<div class="wmnds-content-card">
<div class="wmnds-p-sm wmnds-col-1">
<h2 class="wmnds-content-card__title">Stay up to date</h2>
<p class="wmnds-m-b-md">Receive an email notification when this information changes.</p>
<form class="js-cm-form wmnds-content-card__form wmnds-is--open" id="subForm-example-2" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="92D4C54F0FEC16E5ADC2B1904DE9ED1A99364085B43530088A4D2FC306FC12C93064C1C79B7ABC5EE4710A358CB5FBFB9279A45ECC576F3F096FDC1EFB755F64">
<div class="wmnds-m-b-sm">
<label class="wmnds-fe-label" for="fieldEmail--example-2">Email address</label>
<input autocomplete="Email" aria-label="Email" class="js-cm-email-input qa-input-email wmnds-fe-input" id="fieldEmail--example-2" maxlength="200" name="cm-nllddr-nllddr" required="" type="email" />
</div>
<!-- Expanding content -->
<div class="wmnds-content-card__form-collapse">
<div class="wmnds-m-b-sm">
<label class="wmnds-fe-label" for="fieldName--example-2">Name</label>
<input class="wmnds-fe-input" aria-label="Name" id="fieldName--example-2" maxlength="200" name="cm-name" />
</div>
<div class="wmnds-m-b-sm">
<label class="wmnds-fe-label" for="fieldkdyhlr--example-2">Postcode</label>
<p class="wmnds-m-b-sm">We'll use this to send relevant emails to your location</p>
<input class="wmnds-fe-input" aria-label="Home Postcode" id="fieldkdyhlr--example-2" maxlength="200" name="cm-f-kdyhlr" required="" />
</div>
<label class="wmnds-fe-checkboxes__container wmnds-m-t-md">
I agree to WMCA's Privacy Policy
<input class="wmnds-fe-checkboxes__input" aria-required="" id="cm-privacy-consent--example-2" name="cm-privacy-consent" required="" type="checkbox" />
<span class="wmnds-fe-checkboxes__checkmark">
<svg class="wmnds-fe-checkboxes__icon">
<use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
</svg>
</span>
</label>
<input id="cm-privacy-consent-hidden--example-2" name="cm-privacy-consent-hidden" type="hidden" value="true">
</div>
<button class="wmnds-btn wmnds-btn--primary wmnds-col-1" type="submit">Sign up for updates</button>
</form>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>
</div>
</div>
External link
Use this content card when you want to send users to an external Campaign Monitor form if you want to capture more user data such as demographics, travel habits etc.
HTML markup
<div class="wmnds-content-card">
<div class="wmnds-p-sm wmnds-col-1">
<h2 class="wmnds-content-card__title">Stay up to date</h2>
<p class="wmnds-m-b-md">Receive an email notification when this information changes.</p>
<a href="#" target="_blank" class="wmnds-btn wmnds-col-1">Sign up for updates</a>
</div>
</div>
Swift card
What does it do?
- Shows the image of Swift card and explains how to purchase it
When to use it?
- Only on Swift product landing pages such as Swift Go and PAYG
When not to use it?
- On informational content pages. If you need to use a content card use a standard content card pattern.
How it works
- User can add Swift card image
- User can edit title
- User can add description with bullet points and links
- This card is not clickable
HTML markup
<div class="wmnds-content-card">
<nav class="wmnds-p-sm">
<h2 class="wmnds-content-card__title">How to get Swift pay as you go</h2>
<div class="wmnds-grid wmnds-grid--spacing-md-2-md">
<div class="wmnds-col-1 wmnds-col-md-1-3">
<img src="/img/component-images/content-cards/swift-card.png" alt="">
</div>
<div class="wmnds-content-card__content wmnds-col-1 wmnds-col-md-2-3">
<ul>
<li>You can <a href="#">order a pay as you go Swift card online</a> and we will send you one within 7 days.</li>
<li>If you need a Swift card more quickly, you can go to a <a href="#">travel centre</a>, <a href="#">Payzone store</a> or <a href="#">kiosk</a> and buy it in person.</li>
</ul>
</div>
</div>
</nav>
</div>