SIA Web Design Library

Banner: Cover (huge text, full-height, themed)

Layout variants (layout)

  • Auto: content and padding (default)
  • Half-page: occupies half the viewport (minimum), with the content stuck to the bottom edge
  • Full-height (a.k.a Cover): occupies the entire viewport (minium), with the content stuck to the bottom edge

Text variants (modifier)

  • Huge: large heading, especially on larger screens

Decorations

  • Headshot
  • Country map
  • Country flag
  • Icon
  • Leaf
  • Logo

Background variants (backgroundType, image & modifiers)

  • Cover: occupies the entire space, edge to edge (default for images)
  • Positioned background: occupies a part of the space, maximum 33%, with all edges available, e.g. bottom opposite the text (default position)
  • Background area: occupies a full column (default 33%) and prevents text overlap for photographs
  • Solid color: the applied theme’s accent or complementary solid background
<section class='c-banner t-theme--awareness c-banner--cover'>
    <div class='c-banner__content-wrapper'>
        <span class='c-icon c-icon--icon-leaf-awareness-svg'>
            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
            <svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
                <g id="Awareness_1_">
                    <g>
                        <g>
                            <path fill="#EF3F42" d="M122.2,0C193.5-1.5,251.5,56.5,250,127.8C248.5,195.9,191.9,250,123.7,250H0l0-123.7
				C0,58.1,54.1,1.5,122.2,0z" />
                        </g>
                    </g>
                </g>
            </svg>

        </span>
        <header class='c-section-header c-section-header--huge'>

            <p class='c-section-header__supra'><span>Banner</span></p>

            <h1 class='c-heading c-heading--huge'>
                Section Heading
            </h1>

        </header>

        <div class='c-lead'>
            <p>A lead text is an introduction to the content of the page. Should start with the main subject and finish with an excerpt.</p>
        </div>
    </div>
</section>
 
<section class='{{ get_component_class( 'banner', display ) }}' 
    {% if image and not ( 'positioned-background' in display.modifiers ) %} style="background-image: url( '{{ image.src }}' );" {% endif %}
    {% if dir %} dir='{{ dir }}' {% endif %}>
    {% if flourish %}
        {% include '@brand/flourishes/flourishes--' ~ flourish ~ '.twig' %}
    {% endif %}
    {% if image and ( 'positioned-background' in display.modifiers ) %} 
        <div class='c-banner__background-wrapper' style="background-image: url( '{{ image.src }}' );"></div> 
    {% endif %}
    <div class='c-banner__content-wrapper'>
        {% if leaf %}
            {% include '@brand/sia-leaf/sia-leaf.twig' %}
        {% elseif headshot %}
            {% include '@unit/headshot/headshot.twig' with headshot %}
        {% elseif logo %}
            {% include get_template( 'logo', 'unit' ) with logo %}
        {% elseif countryMap %}
            {% include get_template( 'country-map', 'unit' ) with countryMap %}
        {% elseif countryFlag %}
            {% include '@unit/icon/icon--country-flag.twig' with countryFlag %}
        {% elseif icon %}
            {% include '@unit/icon/icon.twig' with icon %}
        {% endif %}

        {% include '@unit/section-header/section-header.twig' with header %}
        
        {% if meta %}
            {% include '@unit/meta/meta.twig' with meta %}
        {% endif %}

        {% if lead %}
            {% include '@unit/lead/lead.twig' with lead %}
        {% endif %}
        
        {% if button or link %}
            <p class='c-banner__action'>
                {% if button %}
                    {% include get_template( 'button', 'base' ) with button %}
                {% elseif link %}
                    {% include get_template( 'link', 'base' ) with link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
                {% endif %}
            </p>
        {% endif %}
    </div>
</section>
 
{
  "header": {
    "display": {
      "modifiers": [
        "huge"
      ]
    },
    "supraheading": "Banner",
    "heading": {
      "text": "Section Heading"
    }
  },
  "lead": {
    "display": {
      "modifiers": null
    },
    "content": "<p>A lead text is an introduction to the content of the page. Should start with the main subject and finish with an excerpt.</p>"
  },
  "leaf": "awareness",
  "display": {
    "theme": "awareness",
    "layout": "cover"
  }
}