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
- 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
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
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. |