SIA Web Design Library

Callout: Default

No notes defined.

<div class='c-callout  '>
    <div class='c-callout__media'>
        <img class='c-callout__image' src='/images/summit-speaker-balloons-1x1.jpg' alt='' />
    </div>

    <div class='c-callout__content-wrapper'>

        <span class='o-leaf-deco c-callout__leaf-deco' aria-hidden='true'>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>

        <h1 class='c-heading'>
            Callout
        </h1>

        <div class='c-lead'>
            <p>A callout takes over a section of the page. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>
        </div>
        <p class='c-callout__action'>
            <a class='c-link c-link--forward c-link--with-icon c-link--with-icon--reversed ' href="" itemprop="item" itemid=""><span itemprop="name">Follow through</span></a>
        </p>
    </div>
</div>
 
<div class='{{ get_component_class( 'callout', display ) }} {% if not image %}c-callout--text-only{% endif %} {% if icon %}c-callout--with-icon{% endif %}'>
    {% if video or image %}
        <div class='c-callout__media'>
            {% if video %}
                {% include get_template( 'embed', 'unit' ) with video %}
            {% elseif image %}
                <img class='c-callout__image' src='{{ image.src }}' alt='{{ image.alt }}' />
            {% endif %}
        </div>
    {% endif %}

    <div class='c-callout__content-wrapper'>
        {% if notice %}
            {% include get_template( 'notice', 'unit' ) with notice %}
            {% set notice = NULL %}
        {% endif %}
        
        {% if deco and not icon %}
            {% include '@brand/flourishes/flourishes--' ~ deco.type ~ '-deco.twig' with deco|merge( { display: { component: 'callout' } } ) %}
        {% endif %}

        {% if icon %}
            {% include '@unit/icon/icon.twig' with icon|merge( { display: { component: 'callout', modifiers: [ 'double' ] } } ) %}
        {% endif %}

        {% if heading %}
            {% include '@unit/heading/heading.twig' with heading %}
        {% endif %}

        {% if lead %}
            {% include get_template( 'lead', 'unit' ) with lead %}
        {% endif %}

        {% if link %}
            <p class='c-callout__action'>
                {% include get_template( 'link', 'base' ) with link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
            </p>
        {% endif %}
    </div>
</div>
 
{
  "deco": {
    "type": "leaf",
    "count": 10
  },
  "image": {
    "src": "/images/summit-speaker-balloons-1x1.jpg"
  },
  "heading": {
    "text": "Callout"
  },
  "lead": {
    "content": "<p>A callout takes over a section of the page. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>"
  },
  "link": {
    "url": "#",
    "text": "Follow through"
  }
}