Contents

Open this example (Panel example) in a new tab 

      
  
  <div class="govuk-panel ncs-panel--confirmation govuk-!-margin-bottom-6">
   
    <div class="govuk-panel__body">
      <div class="ncs-progress ncs-progress--complete status-100"> 
        <div class="ncs-progress__count govuk-body">
          <span class="govuk-!-font-size-36">10% </span>
          <span class="govuk-visually-hidden">Complete</span> 
        </div>
        
        <div class="ncs-progress__bar">
          <span class="ncs-progress__100"></span>
        </div>
      </div>
    </div>

    <h1 class="ncs-panel__title govuk-panel__title">Assessment complete</h1>
  
  </div>

When to use this component

Use the panel component to display important information when a transaction has been completed.

In most cases, the panel component is used on confirmation pages to tell the user they have successfully completed the task.

When not to use this component

Never use the panel component to highlight important information within body content.

How to use this component

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

You can then edit the text to show the content you'd like.

Contribute to this page on GitHub