Fractal demo

Button: Link 

<a href="#" class="inline-block
    text-pink-600 hover:text-pink-500 focus:text-pink-500 font-bold uppercase tracking-wide transition-all duration-200 ease-out group">
    Doing something<svg class="inline-block align-middle -mt-1 stroke-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
        <use xlink:href="../../icons.svg#chevron-right" />
    </svg>

</a>
 
{% extends '@base-button' %}

{%- block class -%}
    text-pink-600 hover:text-pink-500 focus:text-pink-500 font-bold uppercase tracking-wide transition-all duration-200 ease-out group
    {%- if class -%} {{ class }}{%- endif -%}
{%- endblock class -%}

{%- block after -%}
    {% render '@icon--tiny', { id: 'chevron-right', class: 'ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1' }, true %}
{%- endblock after -%}
 
{
  "label": "Doing something",
  "href": "#"
}

No notes defined.