Hero

This component is a blue hero panel. It should be used to introduce a new site, service or significant section.

Open example in new window
HTML 

<section class="dl-hero">
  <div class="dl-hero__content govuk-width-container">

    <h1 class="govuk-heading-l">A hero example</h1><p class="govuk-body-l">There is some useful stuff on the <a href="https://digital-land.github.io">digital land website</a>.</p>

  </div>
</section>
Jinja 
{%- from "digital-land-frontend/components/hero/macro.jinja" import dlHero -%}
{{ dlHero({
    "html": '<h1 class="govuk-heading-l">A hero example</h1><p class="govuk-body-l">There is some useful stuff on the <a href="https://digital-land.github.io">digital land website</a>.</p>'
}) }}

Hero with button

If you need more control over the elements in the hero component you can you the call method.

This allows you to use additional jinja components within the hero. For example you might want to include a start button to prompt the user to start a journey of your service.

Open example in new window
HTML 


<section class="dl-hero">
  <div class="dl-hero__content govuk-width-container govuk-width-container">

  <h1 class="govuk-heading-l">The entry point of a service</h1>
  <p class="govuk-body-l">Introducing the service and what to expect next. <a href="/">Guidance for the service</a>.</p>












<a href="get-started" role="button" draggable="false" class="govuk-button dl-hero__button govuk-!-margin-bottom-0 govuk-button--start" data-module="govuk-button">
  Get started
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
  <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
</svg></a>




  </div>
</section>
Jinja 
{%- from "digital-land-frontend/components/hero/macro.jinja" import dlHero -%}
{% from 'govuk_frontend_jinja/components/button/macro.html' import govukButton  %}
{% call dlHero({
    "classes": "govuk-width-container"
  }) %}
  <h1 class="govuk-heading-l">The entry point of a service</h1>
  <p class="govuk-body-l">Introducing the service and what to expect next. <a href="/">Guidance for the service</a>.</p>
  {{ govukButton({
    "text": "Get started",
    "isStartButton": true,
    "href": "get-started",
    "classes": "dl-hero__button govuk-!-margin-bottom-0"
  })}}
{% endcall %}