Hero

<section class="usa-hero">
    <div class="usa-grid">
        <div class="usa-hero-callout usa-section-dark">
            <h2>

                <span class="usa-hero-callout-alt">Hero callout:</span> Call attention to a current priority
            </h2>

            <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)">Learn about what we do</a>

        </div>
    </div>
</section>

There are no notes for this item.

<section class="usa-hero">
  <div class="usa-grid">
    <div class="usa-hero-callout usa-section-dark">
      <h2>
        {% if hero.callout %}
          <span class="usa-hero-callout-alt">{{ hero.callout }}</span>
        {% endif %}
        {{ hero.title }}
      </h2>

      {% 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: 1.4.3
uswds:
  path: ../../dist
hero:
  callout: 'Hero callout:'
  title: Call attention to a current priority
  paragraph: >-
    Support the callout with some short explanatory text. You don't need more
    than a couple of sentences.
  button:
    text: Learn about what we do
    href: 'javascript:void(0)'