NJ Web Design System (v2.1.0)

Hero 

<section class="usa-hero" aria-label="Introduction">
    <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>

No notes defined.

<section class="usa-hero" aria-label="Introduction">
  <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: null
  version: 2.1.0
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)