There are no notes for this item.

<section class='c-callout'>

    <h1 class='c-heading'>

        Callout

    </h1>

    <div class='c-lead'>
        <p>A callout highlights a small section of a page. The text should provide an information scent for the link's target.</p>
    </div>

    <p class='c-callout__action'>
        <a class='c-link' href="">Check out the thing</a>
    </p>

</section>
<section class='{{ get_component_class( 'callout', display ) }}'>
    {% if icon %}
        {% include '@unit/icon/icon.twig' with icon|merge( { display: { component: 'callout', modifiers: [ 'x-large' ] } } ) %}
    {% endif %}

    {% include '@unit/heading/heading.twig' with heading %}
    {% include '@unit/lead/lead.twig' with lead %}
    
    {% if button %}
        <p class='c-callout__action'>
            {% include '@base/button/button.twig' with button %}
        </p>
    {% elseif link %}
        <p class='c-callout__action'>
            {% include '@base/link/link.twig' with link %}
        </p>
    {% endif %}
</section>
{
  "heading": {
    "text": "Callout"
  },
  "lead": {
    "content": "<p>A callout highlights a small section of a page. The text should provide an information scent for the link's target.</p>"
  },
  "link": {
    "url": "#",
    "text": "Check out the thing"
  }
}