Hero

<section class="usa-hero">
    <div class="grid-container">
        <div class="usa-hero__callout">
            <h1 class="usa-hero__heading"><span class="usa-hero__heading--alt">Hero callout:</span>Bring attention to a project priority
            </h1>
            <p>Support the callout with some short explanatory text. You don’t need more than a couple of sentences.</p><a class="usa-button" href="javascript:void(0)">Call to action</a>
        </div>
    </div>
</section>

There are no notes for this item.

<section class="usa-hero">
  <div class="grid-container">
    <div class="usa-hero__callout">
      <h1 class="usa-hero__heading">
        {%- if hero.callout -%}
          <span class="usa-hero__heading--alt">{{ hero.callout }}</span>
        {%- endif -%}
        {{ hero.title }}
      </h1>
      {%- if hero.paragraph -%}
        <p>{{ hero.paragraph }}</p>
      {%- endif -%}
      {%- if hero.button -%}
        <a class="usa-button" href="{{ hero.button.href }}">{{ hero.button.text }}</a>
      {%- endif %}
    </div>
  </div>
</section>
package:
  name: uswds
  version: 2.2.1
uswds:
  path: ../../dist
hero:
  callout: 'Hero callout:'
  title: Bring attention to a project priority
  paragraph: >-
    Support the callout with some short explanatory text. You don’t need more
    than a couple of sentences.
  button:
    text: Call to action
    href: 'javascript:void(0)'