VGR Styleguide

File Type Attribute Links 

<!-- Default -->
<div data-smart-links="true">

    <p><a href=".pdf">A link containing href[.pdf]</a></p>

</div>


<!-- Doc -->
<div data-smart-links="true">

    <p><a href=".doc">A link containing href[.doc]</a></p>

</div>


<!-- Xls -->
<div data-smart-links="true">

    <p><a href=".xls">A link containing href[.xls]</a></p>

</div>


<!-- Zip -->
<div data-smart-links="true">

    <p><a href=".zip">A link containing href[.zip]</a></p>

</div>


<!-- Mailto -->
<div data-smart-links="true">

    <p><a href="mailto:">A link containing href[mailto:]</a></p>

</div>


<!-- Tel -->
<div data-smart-links="true">

    <p><a href="tel:">A link containing href[tel:]</a></p>

</div>


{% extends "@link-page" %}
{% block main %}
  <p><a href="{{ modifier }}">A link containing href[{{ modifier }}]</a></p>
{% endblock %}
 
/* Default */
{
  "modifier": ".pdf"
}


/* Doc */
{
  "modifier": ".doc"
}


/* Xls */
{
  "modifier": ".xls"
}


/* Zip */
{
  "modifier": ".zip"
}


/* Mailto */
{
  "modifier": "mailto:"
}


/* Tel */
{
  "modifier": "tel:"
}

Add the data-attribute data-smart-links="true" on the parent (normally your <main> element or the content article.