{% set header_title = 'Typed Text' %}
{% set header_title_show = false %}
{% set header_text = '
    <h1 class="nk-title">' + header_title + '
        <span class="d-block"></span>
        <span class="nk-typed bg-white text-dark-1 pl-8 pr-8 pt-5 pb-5 m-5 d-inline-block"><span> like <em>this</em>.</span><span> or like <small>this</small>.</span><span> with <a href="#">links</a>.</span><span>Unlimited iterations.</span></span>
    </h1>
' %}
{% set header_size = 'sm' %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
    <!-- START: Typed - no loop -->
    <div class="kh-box">
        <div class="nk-gap-4"></div>
        <div class="container">
            <h2 class="nk-title h3 text-center">No Loop</h2>
            <h4 class="nk-sub-title text-center">
                Starts in...
                <span class="nk-typed" data-loop="false">
                    <span>five</span>
                    <span>four</span>
                    <span>three</span>
                    <span>two</span>
                    <span>one</span>
                    <span>YAY!</span>
                </span>
            </h4>
        </div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: Typed - no loop -->

    <!-- START: Typed - custom speed -->
    <div class="kh-box bg-dark-1 text-white">
        <div class="nk-gap-4"></div>
        <div class="container">
            <h2 class="nk-title h3 text-center">Custom Speed</h2>
            <h4 class="nk-sub-title text-center">
                Waiting for
                <span class="d-block d-sm-none"></span>
                <span class="nk-typed bg-white text-dark-1 p-3 m-5 d-inline-block" data-cursor="_">
                    <span>3000^3000</span>
                    <span>200^200</span>
                    <span>0^0</span>
                    <span>2000^2000</span>
                    <span>1000^1000</span>
                </span>
                <span class="d-block d-sm-none"></span>
                milliseconds
            </h4>
        </div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: Typed - custom speed -->

    <!-- START: Typed - advanced options -->
    <div class="kh-box">
        <div class="nk-gap-4"></div>
        <div class="container">
            <h2 class="nk-title h3 text-center">
                Advanced Options like:
                <span class="d-block d-sm-none"></span>
                <span class="nk-typed" data-loop="true" data-shuffle="false" data-cursor="false" data-type-speed="90" data-start-delay="0" data-back-speed="60" data-back-delay="1000">
                    <span>Shuffle</span>
                    <span>Loop</span>
                    <span>Show Cursor</span>
                    <span>Type Speed</span>
                    <span>Start Delay</span>
                    <span>Back Speed</span>
                    <span>Back Delay</span>
                </span>
            </h2>
            <h4 class="nk-sub-title text-center">Using data-attributes</h4>
        </div>
        <div class="nk-gap-4"></div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: Typed - advanced options -->
{% endblock %}