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

Ticket summary message

About

What does it do?

  • The messages give an overall summary of what the ticket buyer can and cannot do, so they can understand the limits of the ticket they want to purchase

How it works

  • The relevant ticket messages appear on the ticket summary page below the full name and price of the ticket
  • The You can and You cannot messages are shown on every ticket summary by default. You must and Swift card/photocard messages only appear if they are relevant to the chosen ticket

You can


You can


HTML markup
<div class="wmnds-ticket-summary-msg wmnds-ticket-summary-msg--you-can ">
  <div class="wmnds-ticket-summary-msg__header">
    <svg class="wmnds-ticket-summary-msg__icon">
      <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
    </svg>
    <h3 class="wmnds-ticket-summary-msg__title">You can</h3>
  </div>
  <div class="wmnds-ticket-summary-msg__info">
    <ul class="wmnds-ticket-summary-msg__list">
      <li>Travel as much as you like for one month</li>
      <li>Travel by bus in the <b>Regional bus area</b></li>
      <li>Travel using any bus operator</li>
      <li>Get <a href="#">discounts for local attractions</a></li>
    </ul>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/ticket-summary-message/_ticket-summary-message.njk" import wmndsTicketSummaryMsg %}

{{
   wmndsTicketSummaryMsg({
      type: 'you-can',
      contentBeforeHTML: '',
      listItemsHTML: [
        'Travel as much as you like for one month',
        'Travel by bus in the Regional bus area',
        'Travel using any bus operator',
        'Get <a href="#">discounts for local attractions</a>'
      ],
      contentAfterHTML: '<a href="#">Read the full terms and conditions</a>'
   })
}}

Nunjucks properties
NameTypeDescription
typestringRequired. Type of the ticket summary message component. Available types: you-can, you-cannot, you-must, swift
classesstringClasses to add to the ticket summary message container
contentBeforeTextstringThe text that displays before the list in the ticket summary message component. You can use any string with this option. If you set contentBeforeHTML, this option is ignored.
contentBeforeHTMLstringThe HTML to use before the list within the ticket summary message component. You can use any string with this option. If you set contentBeforeHTML, contentBeforeText is ignored.
listItemsHTMLarrayRequired. Array of HTML strings used as list items. Each item in the array will be wrapped in li tags.
contentAfterTextstringThe text that displays after the list in the ticket summary message component. You can use any string with this option. If you set contentAfterHTML, this option is ignored.
contentAfterHTMLstringThe HTML to use after the list within the ticket summary message component. You can use any string with this option. If you set contentAfterHTML, contentAfterText is ignored.

You cannot


You cannot

  • Travel by train or tram
  • Share your ticket with other people

HTML markup
<div class="wmnds-ticket-summary-msg wmnds-ticket-summary-msg--you-cannot ">
  <div class="wmnds-ticket-summary-msg__header">
    <svg class="wmnds-ticket-summary-msg__icon">
      <use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
    </svg>
    <h3 class="wmnds-ticket-summary-msg__title">You cannot</h3>
  </div>
  <div class="wmnds-ticket-summary-msg__info">
    <ul class="wmnds-ticket-summary-msg__list">
      <li>Travel by train or tram</li>
      <li>Share your ticket with other people</li>
    </ul>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/ticket-summary-message/_ticket-summary-message.njk" import wmndsTicketSummaryMsg %}

{{
   wmndsTicketSummaryMsg({
      type: 'you-can',
      contentBeforeHTML: '',
      listItemsHTML: [
        'Travel as much as you like for one month',
        'Travel by bus in the Regional bus area',
        'Travel using any bus operator',
        'Get <a href="#">discounts for local attractions</a>'
      ],
      contentAfterHTML: '<a href="#">Read the full terms and conditions</a>'
   })
}}

Nunjucks properties
NameTypeDescription
typestringRequired. Type of the ticket summary message component. Available types: you-can, you-cannot, you-must, swift
classesstringClasses to add to the ticket summary message container
contentBeforeTextstringThe text that displays before the list in the ticket summary message component. You can use any string with this option. If you set contentBeforeHTML, this option is ignored.
contentBeforeHTMLstringThe HTML to use before the list within the ticket summary message component. You can use any string with this option. If you set contentBeforeHTML, contentBeforeText is ignored.
listItemsHTMLarrayRequired. Array of HTML strings used as list items. Each item in the array will be wrapped in li tags.
contentAfterTextstringThe text that displays after the list in the ticket summary message component. You can use any string with this option. If you set contentAfterHTML, this option is ignored.
contentAfterHTMLstringThe HTML to use after the list within the ticket summary message component. You can use any string with this option. If you set contentAfterHTML, contentAfterText is ignored.

You must

When to use it?

  • If a ticket requires prerequisites for it to be valid, such as a photocard or if it requires a certain amount of people

You must

  • Be 5 to 15 years old or have a 16 to 18 Swift photocard

HTML markup
<div class="wmnds-ticket-summary-msg wmnds-ticket-summary-msg--you-must ">
  <div class="wmnds-ticket-summary-msg__header">
    <svg class="wmnds-ticket-summary-msg__icon">
      <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
    </svg>
    <h3 class="wmnds-ticket-summary-msg__title">You must</h3>
  </div>
  <div class="wmnds-ticket-summary-msg__info">
    <ul class="wmnds-ticket-summary-msg__list">
      <li>Be 5 to 15 years old or have a 16 to 18 Swift photocard</li>
    </ul>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/ticket-summary-message/_ticket-summary-message.njk" import wmndsTicketSummaryMsg %}

{{
   wmndsTicketSummaryMsg({
      type: 'you-can',
      contentBeforeHTML: '',
      listItemsHTML: [
        'Travel as much as you like for one month',
        'Travel by bus in the Regional bus area',
        'Travel using any bus operator',
        'Get <a href="#">discounts for local attractions</a>'
      ],
      contentAfterHTML: '<a href="#">Read the full terms and conditions</a>'
   })
}}

Nunjucks properties
NameTypeDescription
typestringRequired. Type of the ticket summary message component. Available types: you-can, you-cannot, you-must, swift
classesstringClasses to add to the ticket summary message container
contentBeforeTextstringThe text that displays before the list in the ticket summary message component. You can use any string with this option. If you set contentBeforeHTML, this option is ignored.
contentBeforeHTMLstringThe HTML to use before the list within the ticket summary message component. You can use any string with this option. If you set contentBeforeHTML, contentBeforeText is ignored.
listItemsHTMLarrayRequired. Array of HTML strings used as list items. Each item in the array will be wrapped in li tags.
contentAfterTextstringThe text that displays after the list in the ticket summary message component. You can use any string with this option. If you set contentAfterHTML, this option is ignored.
contentAfterHTMLstringThe HTML to use after the list within the ticket summary message component. You can use any string with this option. If you set contentAfterHTML, contentAfterText is ignored.

Swift card or photocard

How to use it?

  • When a ticket can be loaded onto a Swift card or Swift photocard
  • This message must contain the terms and conditions for the relevant Swift card type

photocard

  • This ticket will be on a Swift card with your photo on
  • If you already have a Swift card, you can add this ticket to it. You'll need to collect your ticket before you travel
  • If you need a Swift card, we'll send this in the post. It takes seven days to arrive. If you need it sooner, you can get one from a Swift kiosk or Travel Centre
  • You must carry your Swift card whenever you're travelling. You'll need to tap in on buses, at tram stops and train stations
  • You can replace your Swift card if it's lost or stolen. You won't have to buy a new ticket
Read the full terms and conditions

HTML markup
<div class="wmnds-ticket-summary-msg wmnds-ticket-summary-msg--swift ">
  <div class="wmnds-ticket-summary-msg__header">
    <svg class="wmnds-ticket-summary-msg__icon">
      <use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
    </svg>
    <h3 class="wmnds-ticket-summary-msg__title">photocard</h3>
  </div>
  <div class="wmnds-ticket-summary-msg__info">
    <ul class="wmnds-ticket-summary-msg__list">
      <li>This ticket will be on a Swift card with your photo on</li>
      <li>If you already have a Swift card, you can add this ticket to it. You'll need to collect your ticket before you travel</li>
      <li>If you need a Swift card, we'll send this in the post. It takes seven days to arrive. If you need it sooner, you can get one from a Swift kiosk or Travel Centre</li>
      <li>You must carry your Swift card whenever you're travelling. You'll need to tap in on buses, at tram stops and train stations</li>
      <li>You can replace your Swift card if it's lost or stolen. You won't have to buy a new ticket</li>
    </ul>
    <a href="#">Read the full terms and conditions</a>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/ticket-summary-message/_ticket-summary-message.njk" import wmndsTicketSummaryMsg %}

{{
   wmndsTicketSummaryMsg({
      type: 'you-can',
      contentBeforeHTML: '',
      listItemsHTML: [
        'Travel as much as you like for one month',
        'Travel by bus in the Regional bus area',
        'Travel using any bus operator',
        'Get <a href="#">discounts for local attractions</a>'
      ],
      contentAfterHTML: '<a href="#">Read the full terms and conditions</a>'
   })
}}

Nunjucks properties
NameTypeDescription
typestringRequired. Type of the ticket summary message component. Available types: you-can, you-cannot, you-must, swift
classesstringClasses to add to the ticket summary message container
contentBeforeTextstringThe text that displays before the list in the ticket summary message component. You can use any string with this option. If you set contentBeforeHTML, this option is ignored.
contentBeforeHTMLstringThe HTML to use before the list within the ticket summary message component. You can use any string with this option. If you set contentBeforeHTML, contentBeforeText is ignored.
listItemsHTMLarrayRequired. Array of HTML strings used as list items. Each item in the array will be wrapped in li tags.
contentAfterTextstringThe text that displays after the list in the ticket summary message component. You can use any string with this option. If you set contentAfterHTML, this option is ignored.
contentAfterHTMLstringThe HTML to use after the list within the ticket summary message component. You can use any string with this option. If you set contentAfterHTML, contentAfterText is ignored.