Custom theme (replace with client name)

Button: Default 

<a href="" class="
            standard-button
            standard-button--natural-width
            

        ">
        <span class="standard-button__text">

        </span>

        <span class="standard-button__icon">
            <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
                <path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
            </svg>

        </span>
    </a>
 
{% if button.isButton | default %}
    <button
        type="{{ button.type | default }}"
        {%  if button.ariaLabel | default %}
            aria-label="{{ button.ariaLabel }}"
        {% endif %}
        class="
            standard-button
            standard-button--{{ button.width | default('natural') }}-width
            {{ isActive ? 'standard-button--active' }}
        "
        {{ button.isDisabled ? 'disabled' }}


    >
        <div class="standard-button__container">
            <span class="standard-button__text">
                {{ button.text | trim }}
            </span>
        </div>
    </button>
{% else %}
    <a href="{{ button.url }}"
        {%  if button.ariaLabel | default %}
            aria-label="{{ button.ariaLabel }}"
        {% endif %}
        class="
            standard-button
            standard-button--{{ width | default('natural') }}-width
            {{ isActive ? 'standard-button--active' }}

        "
        {{ button.isDisabled ? 'disabled' }}

    >
        <span class="standard-button__text">
            {{ button.text | trim }}
        </span>

        <span class="standard-button__icon">
            {% include 'bits/icons/right-chevron.twig' %}
        </span>
    </a>
{% endif %}
 
{
  "text": "Take action",
  "url": "#",
  "isDisabled": false
}
  • Content: 
    .standard-button
    @extends $headline5
    background-color gray
    border 2px solid black
    border-radius 8px
    display inline-block
    font-size 20px
    font-weight 700
    line-height 28px
    padding 10px 16px
    text-decoration none
    transition background-color 200ms ease-in-out

    &:focus
    &:hover
        background-color white

    &__text
        transition color 200ms ease-in-out
        color black
        ~/:hover &
            color black

    &__icon
        margin-left 8px
        position relative
        bottom -2px
        & > svg
            transition fill 200ms ease-in-out
            fill black
        ~/:hover & > svg
            fill black
  • URL: /components/raw/standard-button/standard-button.styl
  • Filesystem Path: patterns/bits/standard-button/standard-button.styl
  • Size: 689 Bytes

No notes defined.