SIA Web Design Library

Section Header: Huge

No notes defined.

<header class='c-section-header c-section-header--huge'>
    <span class='o-leaf-deco c-section-header__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>

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

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

    <p class='c-section-header__sub'><span>Subheading</span></p>
</header>
 
<header class='{{ get_component_class( 'section-header', display ) }}'>
    {% if deco %}
        {% include '@brand/flourishes/flourishes--' ~ deco.type ~ '-deco.twig' with deco|merge( { display: { component: 'section-header' } } ) %}
    {% endif %}

    {% if breadcrumbs %}
        {% include get_template( 'breadcrumbs', 'unit' ) with breadcrumbs|merge( { display: { component: 'section-header' } } ) %}
    {% endif %}

    {% if supraheading %}
        <p class='c-section-header__supra'><span>{{ supraheading }}</span></p>
    {% endif %}
        
    {% if heading %}
        {% include get_template( 'heading', 'unit' ) with heading %}
    {% endif %}
    
    {% if subheading %}
        <p class='c-section-header__sub'><span>{{ subheading }}</span></p>
    {% endif %}
</header>
 
{
  "heading": {
    "text": "Section Heading"
  },
  "deco": {
    "type": "leaf",
    "count": 10
  },
  "display": {
    "modifiers": [
      "huge"
    ]
  },
  "supraheading": "Supraheading",
  "subheading": "Subheading"
}