Components Ticket Panel

Open this example in a new window

<article class="moj-ticket-panel" aria-label="Sub navigation 1">

  <section class="moj-ticket-panel__content moj-ticket-panel__content--blue" aria-label="Section 1">
    <h2 class="govuk-heading-m govuk-!-margin-bottom-2">This is a heading 2</h2>
    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="govuk-button govuk-!-margin-bottom-1" data-module="govuk-button">
      Save and continue
    </a>
  </section>

</article>

Nunjucks macro options

Container

Name	Type	Required	Description
classes	string	No	Classes to add to the timeline’s container.
attributes	object	No	HTML attributes (for example data attributes) to add to the timeline’s container.

Items

Name	Type	Required	Description
text	string	Yes	If html is set, this is not required. Text to use within the item. If html is provided, the text argument will be ignored.
html	string	Yes	If text is set, this is not required. HTML to use within the item. If html is provided, the text argument will be ignored.
classes	string	No	Classes to add to the timeline’s container.
attributes	object	No	HTML attributes (for example data attributes) to add to the timeline’s container.

Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.

{%- from "moj/components/ticket-panel/macro.njk" import mojTicketPanel -%}

{{ mojTicketPanel({
  attributes: {
    'aria-label': 'Sub navigation 1'
  },
  items: [{
    html: ' <h2 class="govuk-heading-m govuk-!-margin-bottom-2">This is a heading 2</h2>
    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="govuk-button govuk-!-margin-bottom-1" data-module="govuk-button">
      Save and continue
    </a>',
    attributes: {
      'aria-label': 'Section 1'
    },
    classes: 'moj-ticket-panel__content--blue'
  }]
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

Break up content or actions into visually distinct groups of information.

When to use

Use this component for dashboard level information as a way of breaking up content or actions into visually distinct chunks, specifically for instances where information does not fit comfortably into the table or summary list components.

When not to use

Don’t use this component if the information you wish to present can fit comfortably in a table or summary list component. Don’t use this component to present important information at the top of a page. Instead, consider using the banner component or the panel component.

How to use

This component is essentially a container that can hold html, in most cases, a title and some paragraph text. It is intended to be flexible, so can contain columns, buttons, links, and a status badge if required.

The border on the left can be used to reinforce the status when used with a status tag or badge. For example, if the ticket panel contains a red status badge with the text ‘cancelled’, the left border can be made red to draw attention to this information.

It can be used to display information in full width panels or columns of upto four panels per row.

Arguments

Container

Name	Type	Required	Description
classes	string	No	Classes to add to the ticket panel’s container.
attributes	object	No	HTML attributes (for example data attributes) to add to the ticket panel’s container.

Items

Name	Type	Required	Description
text	string	Yes	If html is set, this is not required. Text to use within the item. If html is provided, the text argument will be ignored.
html	string	Yes	If text is set, this is not required. HTML to use within the item. If html is provided, the text argument will be ignored.
classes	string	No	Classes to add to the ticket panel’s container.
attributes	object	No	HTML attributes (for example data attributes) to add to the ticket panel’s container.

Classes

Name
moj-ticket-panel__content–blue
moj-ticket-panel__content–red
moj-ticket-panel__content–yellow
moj-ticket-panel__content–green
moj-ticket-panel__content–purple
moj-ticket-panel__content–orange

Accessibility issues

When several ticket panels are used together, the page structure can become hard to navigate for people who use screen readers. For example, multiple section and article HTML elements are introduced and a list element that could provide some organisation is missing. We are looking into how this could be fixed. This has been raised in an external audit under Web Content Accessibility Guidelines (WCAG) 2.4.4 Link Purpose (In Context) (Level A). If you use this component without addressing this issue, you must list it in the accessibility statement.

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

• how you have used this component in your service
• any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the ticket panel discussion on GitHub.