SIA Web Design Library

Revolving text

No notes defined.

<span class='c-revolving-text'>
    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>
 
<span class='{{ get_component_class( 'revolving-text', display ) }}'>
    {{ prefix }}
    {% if slides %}
        <span class='c-revolving-text__text'>
            {% for key, slide in slides %}
                <strong class='c-revolving-text__text__slide {% if loop.first %} c-revolving-text__text__slide--is-active {% endif %}'>
                    {{ slide }}
                </strong>
            {% endfor %}
        </span>
    {% endif %}
    {{ suffix }}
</span>
 
{
  "prefix": "For youth to realize their potential as ",
  "suffix": null,
  "slides": [
    "agents of change",
    "innovators",
    "entrepreneurs"
  ]
}