SIA Web Design Library

Section Header: Revolving

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>

    <h1 class='c-heading c-heading--huge'>
        <span class='c-revolving-text c-revolving-text--huge'>
            For youth to realize their potential as

            <span class='c-revolving-text__text'>

                <strong class='c-revolving-text__text__slide  c-revolving-text__text__slide--is-active '>
                    agents of change
                </strong>

                <strong class='c-revolving-text__text__slide '>
                    innovators
                </strong>

                <strong class='c-revolving-text__text__slide '>
                    entrepreneurs
                </strong>

            </span>

        </span>
    </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",
    "revolvingText": {
      "prefix": "For youth to realize their potential as ",
      "suffix": null,
      "slides": [
        "agents of change",
        "innovators",
        "entrepreneurs"
      ]
    }
  },
  "deco": {
    "type": "leaf",
    "count": 10
  },
  "display": {
    "modifiers": [
      "huge"
    ]
  }
}