SIA Web Design Library

Heading: Revolving

No notes defined.

<h1 class='c-heading c-heading--revolving'>
    <span class='c-revolving-text c-revolving-text--revolving'>
        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>
 
<h1 class='{{ get_component_class( 'heading', display ) }}'>
    {% if revolvingText %}
        {% include get_template( 'revolving-text', 'unit' ) with revolvingText %}
    {% else %}
        {% if url %}
            {% include get_template( 'link', 'base' ) with {
                href: url
            } %}
        {% else %}
            {{ text }}
        {% endif %}
    {% endif %}
</h1>
 
{
  "text": "Section Heading",
  "display": {
    "modifiers": [
      "revolving"
    ]
  },
  "revolvingText": {
    "prefix": "For youth to realize their potential as ",
    "suffix": null,
    "slides": [
      "agents of change",
      "innovators",
      "entrepreneurs"
    ]
  }
}