Etat Pur Design System

Links 

<div class="flex flex-wrap gap-36 p-8">
    <div class="gap-y-4">
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-base
         link-uno
        
        
    ">

                Link Regular

            </a>
            <a href="#" class="
         underline 
         link-base
         link-uno
        
        
    ">

                Link Regular

            </a>
        </div>
        <div class="flex flex-row gap-8 bg-black p-4">
            <a href="#" class="
        
         link-base
         link-light
        
        
    ">

                Link Regular

            </a>
            <a href="#" class="
         underline 
         link-base
         link-light
        
        
    ">

                Link Regular

            </a>
        </div>
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-base
         link-dark
        
        
    ">

                Link Regular

            </a>
            <a href="#" class="
         underline 
         link-base
         link-dark
        
        
    ">

                Link Regular

            </a>
        </div>
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-base
         link-neutral 
        
        
    ">

                Link Regular

            </a>
            <a href="#" class="
         underline 
         link-base
         link-neutral 
        
        
    ">

                Link Regular

            </a>
        </div>
    </div>
    <div class="gap-y-4">
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-medium
         link-uno
        
        
    ">

                Link Medium

            </a>
            <a href="#" class="
         underline 
         link-medium
         link-uno
        
        
    ">

                Link Medium

            </a>
        </div>
        <div class="flex flex-row gap-8 bg-black p-4">
            <a href="#" class="
        
         link-medium
         link-light
        
        
    ">

                Link Medium

            </a>
            <a href="#" class="
         underline 
         link-medium
         link-light
        
        
    ">

                Link Medium

            </a>
        </div>
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                Link Medium

            </a>
            <a href="#" class="
         underline 
         link-medium
         link-dark
        
        
    ">

                Link Medium

            </a>
        </div>
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-medium
         link-neutral 
        
        
    ">

                Link Medium

            </a>
            <a href="#" class="
         underline 
         link-medium
         link-neutral 
        
        
    ">

                Link Medium

            </a>
        </div>
    </div>
    <div class="gap-y-4">
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-sm
         link-uno
        
        
    ">

                Link Small

            </a>
            <a href="#" class="
         underline 
         link-sm
         link-uno
        
        
    ">

                Link Small

            </a>
        </div>
        <div class="flex flex-row gap-8 bg-black p-4">
            <a href="#" class="
        
         link-sm
         link-light
        
        
    ">

                Link Small

            </a>
            <a href="#" class="
         underline 
         link-sm
         link-light
        
        
    ">

                Link Small

            </a>
        </div>
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-sm
         link-dark
        
        
    ">

                Link Small

            </a>
            <a href="#" class="
         underline 
         link-sm
         link-dark
        
        
    ">

                Link Small

            </a>
        </div>
        <div class="flex flex-row gap-8 p-4">
            <a href="#" class="
        
         link-sm
         link-neutral 
        
        
    ">

                Link Small

            </a>
            <a href="#" class="
         underline 
         link-sm
         link-neutral 
        
        
    ">

                Link Small

            </a>
        </div>
    </div>

</div>
 
<div class="flex flex-wrap gap-36 p-8">
    {% for link in links %}
        <div class="gap-y-4">
            <div class="flex flex-row gap-8 p-4">
                {% render "@template-link" with {href:link.href, size:link.size, label:link.label, type: 'uno' } %}
                {% render "@template-link" with {href:link.href, size:link.size, label:link.label, type: 'uno', underlined:true } %}
            </div>
            <div class="flex flex-row gap-8 bg-black p-4">
                {% render "@template-link" with {href:link.href, size:link.size, label:link.label, type: 'light' } %}
                {% render "@template-link" with {href:link.href, size:link.size, label:link.label, type: 'light', underlined:true } %}
            </div>
            <div class="flex flex-row gap-8 p-4">
                {% render "@template-link" with {href:link.href, size:link.size, label:link.label, type: 'dark' } %}
                {% render "@template-link" with {href:link.href, size:link.size, label:link.label, type: 'dark', underlined:true } %}
            </div>
            <div class="flex flex-row gap-8 p-4">
                {% render "@template-link" with {href:link.href, size:link.size, label:link.label } %}
                {% render "@template-link" with {href:link.href, size:link.size, label:link.label, underlined:true} %}
            </div>
        </div>
    {% endfor %}

</div>
 
{
  "links": [
    {
      "label": "Link Regular",
      "size": "base",
      "href": "#",
      "type": "neutral"
    },
    {
      "label": "Link Medium",
      "size": "medium",
      "href": "#",
      "type": "neutral"
    },
    {
      "label": "Link Small",
      "size": "sm",
      "href": "#",
      "type": "neutral"
    }
  ]
}

Link guide

How to use

Template name

template-link

Import

{% render "@template-link" with {...} %}

Examples

{% render "@template-link" with {href:link.href, size:link.size, label:link.label, underlined:true, type:'light'} %}

Available props

  • size: sm, base | default: base
  • type: uno, light, dark, neutral | default: neutral
  • label: string | default: Link
  • underlined: true, false | default: false
  • href: string | default: #