Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Highlight

A simple box used to draw attention to part of a page.

Default grey box

Open this example in a new tab

HTML

<div class="das-highlight">
  <h2 class="govuk-heading-l">
    Highlight heading
  </h2>
  <h3 class="govuk-heading-m">Example search form</h3>
  <p class="govuk-body">Any content can could go here</p>
  <form action="" method="">
    <div class="govuk-form-group">
      <label for="search-loc" class="govuk-label">Enter location</label>
      <input type="text" class="govuk-input" id="search-loc">
    </div>
    <button class="govuk-button govuk-!-margin-0" data-module="govuk-button">
      Search
    </button>
  </form>
</div>

Information box

Open this example in a new tab

HTML

<div class="das-highlight das-highlight--information">
  <h2 class="govuk-heading-m">
    Accept your agreement to access apprenticeship funding
  </h2>
  <p class="govuk-body">Accept your agreement with the Education and Skills Funding Agency to access funding for apprenticeship training.</p>
  <p class="govuk-body govuk-!-margin-0"><a href="#" class="govuk-link govuk-!-font-weight-bold das-highlight__link">Accept your agreement</a> </p>
</div>