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

Travel as much as you like for one month
Travel by bus in the Regional bus area
Travel using any bus operator
Get discounts for local attractions

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

Name	Type	Description
type	string	Required. Type of the ticket summary message component. Available types: `you-can`, `you-cannot`, `you-must`, `swift`
classes	string	Classes to add to the ticket summary message container
contentBeforeText	string	The 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.
contentBeforeHTML	string	The 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.
listItemsHTML	array	Required. Array of HTML strings used as list items. Each item in the array will be wrapped in `li` tags.
contentAfterText	string	The 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.
contentAfterHTML	string	The 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

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

Name	Type	Description
type	string	Required. Type of the ticket summary message component. Available types: `you-can`, `you-cannot`, `you-must`, `swift`
classes	string	Classes to add to the ticket summary message container
contentBeforeText	string	The 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.
contentBeforeHTML	string	The 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.
listItemsHTML	array	Required. Array of HTML strings used as list items. Each item in the array will be wrapped in `li` tags.
contentAfterText	string	The 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.
contentAfterHTML	string	The 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

Name	Type	Description
type	string	Required. Type of the ticket summary message component. Available types: `you-can`, `you-cannot`, `you-must`, `swift`
classes	string	Classes to add to the ticket summary message container
contentBeforeText	string	The 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.
contentBeforeHTML	string	The 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.
listItemsHTML	array	Required. Array of HTML strings used as list items. Each item in the array will be wrapped in `li` tags.
contentAfterText	string	The 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.
contentAfterHTML	string	The 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

Name	Type	Description
type	string	Required. Type of the ticket summary message component. Available types: `you-can`, `you-cannot`, `you-must`, `swift`
classes	string	Classes to add to the ticket summary message container
contentBeforeText	string	The 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.
contentBeforeHTML	string	The 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.
listItemsHTML	array	Required. Array of HTML strings used as list items. Each item in the array will be wrapped in `li` tags.
contentAfterText	string	The 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.
contentAfterHTML	string	The 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.

Your privacy settings

General

Form elements

Ticket summary message

About

What does it do?

How it works

You can

You can

You cannot

You cannot

You must

When to use it?

You must

Swift card or photocard

How to use it?

photocard