SIA Web Design Library

Tour: Autostart (default)

No notes defined.

<div class="c-tour">
    <button aria-expanded="false" aria-controls="demo" id='demo-help-trigger' class='o-modal-trigger c-button c-button--with-icon c-button--small  c-button--help demo__js-toggle' autostart='true'><span>How to vote?</span></button>

    <div id='demo' class='c-info-box c-tour__content' role='contentinfo'>
        <h1 class='c-heading'>
            How to Vote
        </h1>

        <ol class='c-tour__items u-list--unstyled'>
            <li class='c-tour__items__item'>
                <span class='c-tag c-tag--neutral'>Step 1</span>
                <h1 class='c-heading c-heading--minor'>
                    Browse our ventures
                </h1>
                <p>Check out all project videos and select your single favorite SIA Venture.</p>
            </li>
            <li class='c-tour__items__item'>
                <span class='c-tag c-tag--neutral'>Step 2</span>
                <h1 class='c-heading c-heading--minor'>
                    Submit your vote
                </h1>
                <p>Authenticate with a social media account to help us ensure a fair competition.</p>
            </li>
            <li class='c-tour__items__item'>
                <span class='c-tag c-tag--neutral'>Step 3</span>
                <h1 class='c-heading c-heading--minor'>
                    Show you support
                </h1>
                <p>Share your vote with your friends or send the venture team an encouraging message.</p>
            </li>
        </ol>
    </div>
</div>
 
<div class="{{ get_component_class( 'tour', display ) }}">
    <button aria-expanded="false" aria-controls="{{ tourId }}" id='{{ tourId }}-help-trigger' class='o-modal-trigger c-button c-button--with-icon c-button--small {% if seen %} c-button--secondary {% endif %} c-button--help {{ tourId }}__js-toggle' autostart='{{ autostart }}'><span>{{ triggerText }}</span></button>

    <div id='{{ tourId }}' class='c-info-box c-tour__content' role='contentinfo'>
        {% if heading %}
            {% include get_template( 'heading', 'unit' ) with heading %}
        {% endif %}

        {% if lead %}
            {% include get_template( 'lead', 'unit' ) with lead %}
        {% endif %}
        
        {% if items %}
            <ol class='c-tour__items u-list--unstyled'>
                {% for item in items %}
                    <li class='c-tour__items__item'>
                        {% if item.label %}
                            {% include get_template( 'tag', 'unit' ) with { 
                                display: { modifiers: [ 'neutral' ] },
                                text: item.label,
                            } %}
                        {% endif %}
                        {% if item.title %}
                            {% include get_template( 'heading', 'unit' ) with { 
                                display: { 
                                        modifiers: [ 'minor' ] 
                                    },
                                    text: item.title
                                } %}
                        {% endif %}
                        {% if item.content %}
                            {{ item.content|raw }}
                        {% endif %}
                    </li>
                {% endfor %}
            </ol>
        {% endif %}
    </div>
</div>
 
{
  "tourId": "demo",
  "triggerText": "How to vote?",
  "autostart": true,
  "heading": {
    "text": "How to Vote"
  },
  "items": [
    {
      "label": "Step 1",
      "title": "Browse our ventures",
      "content": "<p>Check out all project videos and select your single favorite SIA Venture.</p>"
    },
    {
      "label": "Step 2",
      "title": "Submit your vote",
      "content": "<p>Authenticate with a social media account to help us ensure a fair competition.</p>"
    },
    {
      "label": "Step 3",
      "title": "Show you support",
      "content": "<p>Share your vote with your friends or send the venture team an encouraging message.</p>"
    }
  ]
}