Twi

<span class="Twi">
    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
        <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"
}
  • 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.