<!-- 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.