SIA Web Design Library

Page section: Reversed

No notes defined.

<section class='c-page-section c-page-section--reversed 
             c-page-section--media                          c-page-section--media--image             '>
    <div class='c-page-section__figure-wrapper'>
        <div class='c-page-section__media'>
            <div class='c-page-section__media__container-ratio'>
                <img class='c-page-section__image' src='/images/summit-speaker-balloons-3x2.jpg' alt='' />
            </div>
        </div>
    </div>

    <div class='c-page-section__content-wrapper'>
        <div class='c-callout c-callout--reversed c-callout--text-only '>

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

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

                <div class='c-lead c-lead--reversed'>
                    <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>
</section>
 
<section class='{{ get_component_class( 'page-section', display ) }} 
            {% if video or image %} c-page-section--media {% endif %}
            {% if video %} c-page-section--media--video {% endif %}
            {% if image %} c-page-section--media--image {% endif %}
            {% if figures %} c-page-section--figures {% endif %}'>
    <div class='c-page-section__figure-wrapper'>
        {% if video or image %}
            <div class='c-page-section__media'>
                {% if video %}
                    {% include get_template( 'embed', 'unit' ) with video %}
                {% elseif image %}
                    <div class='c-page-section__media__container-ratio'>
                        <img class='c-page-section__image' src='{{ image.src }}' alt='{{ image.alt }}' />
                    </div>
                {% endif %}
            </div>
        {% endif %}
        {% if figures %}
            {% include get_template( 'figures', 'group' ) with figures %}
        {% endif %}
    </div>

    <div class='c-page-section__content-wrapper'>
        {% include get_template( 'callout', 'unit' ) with callout|merge( { image: null, video: null } ) %}
    </div>
</section>
 
{
  "image": {
    "src": "/images/summit-speaker-balloons-3x2.jpg"
  },
  "callout": {
    "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"
    }
  },
  "theme": "awareness",
  "display": {
    "modifiers": [
      "reversed"
    ]
  }
}