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--community c-banner--containered-content c-banner--half-page t-background--accent'>
    <div class='c-banner__content-wrapper'>
        <span class='c-icon c-icon--x-large c-icon--noun_communication_1435998-svg'>
            <svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px">
                <path d="M48.68,51.39a4.8,4.8,0,0,0-2.14-4,6.94,6.94,0,0,1,4.09-12.69,7.07,7.07,0,0,1,6.73,7A6.93,6.93,0,0,1,54.3,47.4a4.79,4.79,0,0,0,2.64,8.78,6.89,6.89,0,0,1,6.88,6.88V64a2.5,2.5,0,0,0,5,0v-.92A11.9,11.9,0,0,0,57.58,51.2a11.94,11.94,0,1,0-14.34,0A11.9,11.9,0,0,0,32,63.06v4a2.5,2.5,0,0,0,5,0v-4a6.89,6.89,0,0,1,6.88-6.88A4.8,4.8,0,0,0,48.68,51.39Z"></path>
                <path d="M93.35,54.46c.15-1.46.25-2.91.25-4.33a43.4,43.4,0,0,0-5.19-20.54,9.47,9.47,0,0,0-12-14.06A43.52,43.52,0,0,0,51.67,6.72,9.48,9.48,0,0,0,33.44,10,43.73,43.73,0,0,0,14,26.06a10.67,10.67,0,0,0-7,19.81c-.14,1.43-.24,2.86-.24,4.26a43.4,43.4,0,0,0,5.13,20.44A9.47,9.47,0,0,0,23.78,84.65,43.51,43.51,0,0,0,48.7,93.55a9.47,9.47,0,0,0,18.1-3.28A43.72,43.72,0,0,0,86.36,74.14a10.67,10.67,0,0,0,7-19.68Zm-12.55-35a4.49,4.49,0,1,1-4.49,4.49A4.49,4.49,0,0,1,80.8,19.45ZM42.91,5.85a4.49,4.49,0,1,1-4.49,4.49A4.49,4.49,0,0,1,42.91,5.85ZM6.53,36.59a5.68,5.68,0,1,1,5.68,5.69A5.69,5.69,0,0,1,6.53,36.59Zm12.9,44.13a4.49,4.49,0,1,1,4.49-4.49A4.49,4.49,0,0,1,19.43,80.72ZM57.35,94.15a4.49,4.49,0,1,1,4.49-4.49A4.49,4.49,0,0,1,57.35,94.15Zm8.4-8.88a9.48,9.48,0,0,0-17.81,3.24A38.5,38.5,0,0,1,27.5,81.19,9.47,9.47,0,0,0,15.83,67.46,38.42,38.42,0,0,1,11.7,50.13c0-.05,0-.11,0-.16A44.57,44.57,0,0,0,24,62.39a2.5,2.5,0,0,0,2.89-4.08c-5.15-3.65-9.06-7.68-11.29-11.59a10.66,10.66,0,0,0,5.58-15.95c4.63-1.8,11-2.4,18.08-1.64a2.5,2.5,0,0,0,.53-5c-7.4-.79-14.05-.24-19.3,1.54A38.7,38.7,0,0,1,34.63,15a9.47,9.47,0,0,0,17.65-3.21A38.52,38.52,0,0,1,72.71,19a9.48,9.48,0,0,0,11.71,13.7A38.42,38.42,0,0,1,88.6,50.13c0,.25,0,.51,0,.76-3.71-6.51-11-12.91-20.5-17.95a2.5,2.5,0,0,0-2.33,4.42C74.4,41.94,81.11,47.81,84.3,53.48a10.65,10.65,0,0,0-5.52,15.8c-7.88,3.15-20.42,2.6-33.11-1.63a2.5,2.5,0,0,0-1.58,4.74A72.11,72.11,0,0,0,66.5,76.3,39.1,39.1,0,0,0,80.21,74.1,38.72,38.72,0,0,1,65.75,85.27Zm22-16a5.68,5.68,0,1,1,5.68-5.69A5.69,5.69,0,0,1,87.79,69.25Z"></path>
            </svg>
        </span>
        <header class='c-section-header'>

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

            <h1 class='c-heading'>
                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": null
    },
    "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": "community",
    "backgroundType": "accent",
    "layout": "half-page",
    "modifiers": [
      "containered-content"
    ]
  },
  "icon": {
    "display": {
      "modifiers": [
        "x-large"
      ]
    },
    "basename": "noun_Communication_1435998.svg"
  }
}