<h3>Variants</h3>

<p>
    The widget support three alternative variants: <code>dark</code>, <code>light</code>,
    and <code>supplementary</code>
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {%- call ui.util.call(ui.nds_steps, variant="dark") -%}
            {{ ui.nds_step_item(lipsum(1), title="First", fill=true) }}
            {{ ui.nds_step_item(lipsum(1), title="Second") }}
        {%- endcall %}
        {%- call ui.util.call(ui.nds_steps, variant="light") -%}
            {{ ui.nds_step_item(lipsum(1), title="First", fill=true) }}
            {{ ui.nds_step_item(lipsum(1), title="Second") }}
        {%- endcall %}
        {%- call ui.util.call(ui.nds_steps, variant="supplementary") -%}
            {{ ui.nds_step_item(lipsum(1), title="First", fill=true) }}
            {{ ui.nds_step_item(lipsum(1), title="Second") }}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}