Contents

Open this example (Highlight Box example) in a new tab 

      
  
  <div class="ncs-highlight-box">
      
      <a href="#" class="ncs-highlight-box__link">
         <div class="ncs-highlight-box__card">
              <h3 class="govuk-heading-s">Progressing your career</h3>
              <p class="govuk-body-m">
                  Move up in your career by developing new skills. Find opportunities like volunteering and online learning.
              
              </p>
         </div>
       </a>
   
  </div>

When to use this component

You can use this component as a background on content to break up a large area of text to make it easier for the user to read.

You can also use the highlight box as a call to action on landing pages.

How to use this component

You can copy the HTML and paste it where you'd like to display the highlight box on your page. You can then edit the text to show the content you'd like.

If you use the highlight box as a call to action, you should use a focus state so the user is aware that the section is a link.

Contribute to this page on GitHub