Partial Component

Text Link

The Text Link partial creates a styled text link with automatic external link detection. It handles security attributes and accessibility for external links automatically.

Manifest

{
  "name": "text-link",
  "type": "_partials",
  "styles": ["text-link.css"],
  "scripts": [],
  "requires": []
}

Configuration

ctas:
  - url: '/about'
    label: 'Learn More'
    isButton: false  # Creates a text link
  - url: 'https://example.com'
    label: 'Visit Example'
    isButton: false

Configuration Options

PropertyTypeRequiredDescription
urlstringYesLink destination URL
labelstringYesLink text content
isButtonbooleanYesMust be false

Examples

Examples of text links used in CTA configurations.

Internal Text Link External Text Link

Usage in Templates

{% from "components/_partials/text-link/text-link.njk" import textLink %}

{# Direct usage #}
{{ textLink({
  url: '/about',
  label: 'Learn More'
}) }}

{# Used within CTAs partial #}
{% for cta in section.ctas %}
  {% if not cta.isButton %}
    {{ textLink(cta) }}
  {% endif %}
{% endfor %}

Notes

  • Automatically detects external URLs and adds target="_blank' and rel="noopener noreferrer"
  • ARIA labels for external links
  • Used within CTAs partial for non-button links