Ticket panel

      
  
  <div class="app-your-reference govuk-body">
  

    <p>
      <span class="app-your-reference__code govuk-heading-xl">
        8E7Z 9MK2 G46M 6K
      </span>
    </p>

    <div class="app-your-reference__meta">
      <p>
        2 March 2023
      </p>
    </div>
  
  
  </div>
   

    

When to use this component

You can use the ticket panel to highlight content that the user will need later in their journey.

It helps to break up the content so when the user scans the page, they cannot miss something they need, such as a reference number.

When not to use this component

Do not use the ticket panel to highlight all the important content on a page. You should limit this component to a maximum of one per page. This is because the ticket panel will no longer draw the user's attention if there are other visually prominent elements on the page.

Additionally, you should not use the ticket panel to warn users about something important. Instead, you should use the warning text component on the GOV.UK design system.

How to use this component

You can copy the HTML and paste it where you'd like to display the ticket panel on your page.

You can then edit the heading and paragraph elements to display the content you would like.

Writing for this component

In most cases, a heading and a single line of paragraph text is enough information to display in the ticket panel.

However this component is flexible so it can contain other HTML elements, if required.