V6 Clearleft Patterns

Twi: With Classes 

<span class="Twi eyebrow">
    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right eyebrow">
        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
    </svg>
    <span>Find out more</span></span>
 
{% set classNames = 'Twi' %}
{% if align is defined %}{% set classNames = classNames ~ ' Twi--' ~ align
%}{% endif %}
{% if size is defined %}{% set classNames = classNames ~ ' Twi--' ~ size
%}{% endif %}
{% if link is defined %}{% set classNames = classNames ~ ' Twi--link'
%}{% endif %}
{% if classes is defined %}{% set classNames = classNames ~ ' ' ~ classes
%}{% endif %}
{% if
  link is defined and classes is not defined %}{% set classNames = classNames
  ~ ' text-blue'
%}{% endif %}

{%- if link is defined -%}
  <a href="{{ link }}" class="{{ classNames }} focus" style="{{ style|default('') }}">
{%- else -%}
  <span class="{{ classNames }}">
{%- endif -%}
  {% include "@icon" with { id: icon, size: size is defined ? size, } %}
  <span>{{ text }}</span> 
{%- if link is defined -%}
  </a>
{%- else -%}
  </span>
{%- endif -%}
 
{
  "icon": "arrow-right",
  "text": "Find out more",
  "classes": "eyebrow"
}
  • Content: 
    .Twi {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  color: inherit;

  svg {
    flex-shrink: 0;
    margin-right: 0.5em;
  }

  &--right {
    svg {
      order: 1;
      margin-left: 0.5em;
      margin-right: 0;
    }
  }

  &--s {
    font-size: var(--step--1);
  }

  &--l {
    font-size: var(--step-1);
  }

  &--link:hover {
    text-decoration: underline;
  }
}
  • URL: /components/raw/twi/twi.css
  • Filesystem Path: src/templates/components/twi/twi.css
  • Size: 406 Bytes

No notes defined.