SIA Web Design Library

Link

No notes defined.

<!-- Default -->
<a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Check me out</span></a>


<!-- Muted -->
<a class='c-link c-link--muted ' href="" itemprop="item" itemid=""><span itemprop="name">Muted link</span></a>


<!-- Minimal -->
<a class='c-link c-link--minimal ' href="" itemprop="item" itemid=""><span itemprop="name">Minimal link</span></a>


<!-- With Icon -->
<a class='c-link c-link--edit c-link--with-icon ' href="" itemprop="item" itemid=""><span itemprop="name">Icon link</span></a>


<!-- With Icon -->
<a class='c-link c-link--forward c-link--with-icon c-link--with-icon--reversed ' href="" itemprop="item" itemid=""><span itemprop="name">Reversed icon</span></a>


<a class='{{ get_component_class( 'link', display ) }} {% if showInModal %} o-modal-trigger {% endif %}' 
    href="{{ href }}" 
    itemprop="item" 
    itemid="{{ href }}"
    {% if id %} id="{{ id }}" {% endif %} 
    {% if target %} target="{{ target }}" {% endif %} 
    {% if rel %} rel="{{ rel }}" {% endif %} 
    {% if title %} title="{{ title }}" {% endif %}><span itemprop="name">{{ text }}</span></a>
 
/* Default */
{
  "text": "Check me out",
  "url": "#"
}


/* Muted */
{
  "text": "Muted link",
  "url": "#",
  "display": {
    "modifiers": [
      "muted"
    ]
  }
}


/* Minimal */
{
  "text": "Minimal link",
  "url": "#",
  "display": {
    "modifiers": [
      "minimal"
    ]
  }
}


/* With Icon */
{
  "text": "Icon link",
  "url": "#",
  "display": {
    "modifiers": [
      "edit",
      "with-icon"
    ]
  }
}


/* With Icon */
{
  "text": "Reversed icon",
  "url": "#",
  "display": {
    "modifiers": [
      "forward",
      "with-icon",
      "with-icon--reversed"
    ]
  }
}