SIA Web Design Library

Section Header: Default

No notes defined.

<header class='c-section-header'>
    <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>

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

</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
  }
}