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>

            <a class="usa-hero-link" href="javascript:void(0)">Link to more about that priority</a>

            <a class="usa-button usa-button-big usa-button-secondary" 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.link %}
      <a class="usa-hero-link" href="{{ hero.link.href }}">{{ hero.link.text }}</a>
      {% endif %}

      {% if hero.button %}
      <a class="usa-button usa-button-big usa-button-secondary" href="{{ hero.button.href }}">{{ hero.button.text }}</a>
      {% endif %}
    </div>
  </div>
</section>
package:
  name: uswds
  version: 1.3.0
uswds:
  path: ../../dist
hero:
  callout: 'Hero callout:'
  title: Call attention to a current priority
  link:
    text: Link to more about that priority
    href: 'javascript:void(0)'
  button:
    text: Learn about what we do
    href: 'javascript:void(0)'