Pattern Library

{% load cotton %}
{% load cotton_aliases %}

<div class="component-variants">
    <h1>Link Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.name }}</h2>
        
        {% if variant.inverse %}
        <div class="usa-dark-background" style="padding: 10px;">
        {% endif %}
        {% cotton link href="{{ variant.href }}" is_external="{{ variant.external }}" inverse="{{ variant.inverse }}" target="{{ variant.target }}" class="{{ variant.class }}" %}
            {{ variant.text }}
        {% endcotton %}
        {% if variant.inverse %}
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

name: Link
context:
  variants:
    - name: Basic Link
      href: "#"
      text: "Basic link"
    - name: External Link
      href: "https://www.example.com"
      text: "External link"
      external: true
    - name: Link with Target
      href: "#"
      text: "Link with target"
      target: "_blank"
    - name: Link with Custom Class
      href: "#"
      text: "Custom class link"
      class: "usa-link--visited"
    - name: Link on Dark Background
      href: "https://www.example.com"
      text: "Link on dark background"
      inverse: true
      external: true