V6 Clearleft Patterns

Button: With Arrow 

<button class="Button focus"><span>Boop this</span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
    </svg></button>
 
{% set buttonClass = style is defined and style is not empty ? " Button--"~style  %}
{% set hasClasses = classes is defined and classes is not empty %}
{% set hasAttributes = attributes is defined and attributes is iterable %}
{% set hasLink = link is defined and link is not empty %}
{% set hasArrow = arrow is defined and arrow %}
{% set attrs = '' %}
{% if hasAttributes %}
{% for key in attributes|keys %}
  {% set attrs = attrs ~ ' ' ~ key ~ '="' ~ attributes[key] ~ '"' %}  
{% endfor %}
{% endif %}

{% apply spaceless %}
{% if hasLink %}
  <a href="{{link}}" class="Button focus{{ buttonClass }}{{ hasClasses ? ' ' ~ classes }}" {{ hasAttributes ? attrs|raw}}>
{% else %}
  <button class="Button focus{{ buttonClass }}{{ hasClasses ? ' ' ~ classes }}" {{ hasAttributes ? attrs|raw }}>
{% endif %}
    <span>{{text}}</span>
    {% if hasArrow %}
      {% include "@icon" with { id: 'arrow-right', size: 's' } %}
    {% endif %}
{% if hasLink %}
  </a>
{% else %}  
  </button>
{% endif %}
{% endapply %}
 
{
  "text": "Boop this",
  "arrow": true
}
  • Content: 
    .Button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dark);
  outline: none;
  border: none;
  color: var(--white);
  font-size: var(--step--1);
  font-weight: 700;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  min-height: 54px;
  transition: color 0.2s var(--confident-ease);
  transition-property: background-color, color, box-shadow;

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  span {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  svg {
    z-index: 2;
    position: relative;
    margin-left: var(--space-s);
  }

  &:hover {
    background-color: var(--green-step--2);
  }

  &:active {
    border-top: 2px solid var(--light-grey-step--2);
    background-color: var(--dark);
  }

  &--light {
    background-color: var(--white);
    color: var(--dark);

    &:hover {
      background-color: var(--green);
    }

    &:active {
      background-color: var(--white);
    }
  }

  &--outline {
    box-shadow: 0px 0px 0px 1px var(--dark) inset;
    background-color: var(--white);
    color: var(--dark);

    &:hover {
      background-color: var(--green-step-2);
      box-shadow: 0px 0px 0px 1px var(--green-step--2) inset;
      color: var(--green-step--2);
    }

    &:active {
      border-top: 2px solid var(--dark);
      background-color: var(--white);
      color: var(--dark);
    }
  }

  &--outline-light {
    box-shadow: 0px 0px 0px 1px var(--white) inset;

    &:hover {
      background-color: var(--green-step--2);
      box-shadow: 0px 0px 0px 1px var(--green-step-2) inset;
      color: var(--green-step-2);
    }

    &:active {
      border-top: 2px solid var(--white);
      background-color: var(--dark);
      color: var(--white);
    }
  }
}
  • URL: /components/raw/button/button.css
  • Filesystem Path: src/templates/components/button/button.css
  • Size: 1.9 KB

No notes defined.