SIA Web Design Library

Banner: Positioned graphic background (complementary background, 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--support c-banner--positioned-background c-banner--background-bottom-end t-background--complementary'>

    <div class='c-banner__background-wrapper' style="background-image: url( '/images/RZL-SIA-mountain.webp' );"></div>
    <div class='c-banner__content-wrapper'>

        <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>"
  },
  "display": {
    "theme": "support",
    "backgroundType": "complementary",
    "modifiers": [
      "positioned-background",
      "background-bottom-end"
    ]
  },
  "image": {
    "src": "/images/RZL-SIA-mountain.webp"
  },
  "icon": null
}