E3 Alliance Pattern Library

CTA Button: Long Text 

<a href="#" class="cta-button cta-button--primary  ">
        <span class="cta-button__title">
            Get a closer look at this data
        </span>
        <div class="cta-button__icon">
            <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="_mark" d="M12.5 4H8.5V0L12.5 4ZM8.5 5H12.5V14.5C12.5 15.3438 11.8125 16 11 16H2C1.15625 16 0.5 15.3438 0.5 14.5V1.5C0.5 0.6875 1.15625 0 2 0H7.5V4C7.5 4.5625 7.9375 5 8.5 5ZM8.46875 9.21875L7.25 10.4688V7.25C7.25 6.84375 6.90625 6.5 6.5 6.5C6.0625 6.5 5.75 6.84375 5.75 7.25V10.4688L4.5 9.21875C4.375 9.09375 4.1875 9 4 9C3.78125 9 3.59375 9.09375 3.46875 9.21875C3.15625 9.53125 3.15625 10 3.46875 10.2812L5.96875 12.7812C6.25 13.0938 6.71875 13.0938 7 12.7812L9.5 10.2812C9.8125 10 9.8125 9.53125 9.5 9.21875C9.21875 8.9375 8.75 8.9375 8.46875 9.21875Z" fill="#88C965" />
            </svg>
        </div>
    </a>
 
<a
        href="{{ link }}"
        class="cta-button cta-button--{{ background }} {% if isHome %}cta-button--home{%endif%} {% if size %}cta-button--{{ size }}{% endif %}"
    >
            <span class="cta-button__title">
            {{ linkText }}
        </span>
        <div class="cta-button__icon">
            {% include 'bits/icons/' ~ icon ~ '.twig' %}
        </div>
    </a>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "linkText": "Get a closer look at this data",
  "link": "#",
  "background": "primary",
  "icon": "file-link"
}
  • Content: 
    .cta-button
    &
    &--light
        --backgroundColor white
        --backgroundColorHover white
        --backgroundColorActive lightGrey
        --textColor sapphire
        --textColorActive jet
        --buttonShadowColorHover rgba(0, 0, 0, 0.5)
        --buttonShadowColorActive rgba(0, 0, 0, 0)
    &--dark
        --backgroundColor sapphire
        --backgroundColorHover sapphire
        --backgroundColorActive darkSapphire
        --textColor white
        --textColorActive greenApple
        --buttonShadowColorHover rgba(0, 0, 0, 0.25)
        --buttonShadowColorActive rgba(0, 0, 0, 0.25)

    &--light
        --backgroundColor white
        --backgroundColorHover white
        --backgroundColorActive lightGrey
        --textColor sapphire
        --textColorActive jet
        --buttonShadowColorHover rgba(0, 0, 0, 0.5)
        --buttonShadowColorActive rgba(0, 0, 0, 0)
    &--home
    &--small
        display inline-flex

    background-color var(--backgroundColor)
    color var(--textColor)
    display flex
    font-weight 600
    justify-content center
    padding 8px 12px
    padding-right 18px
    text-decoration none
    transition all 0.3s

    &:hover
    &:active
    &:focus
        color var(--textColorActive)
        background-color var(--backgroundColorHover)
    &:hover
    &:focus
        box-shadow 0 4px 16px var(--buttonShadowColorHover)
    &:active
        box-shadow none
        background-color var(--backgroundColorActive)
        box-shadow 0 4px 16px var(--buttonShadowColorActive)


    &__title
        text-align center

    &__icon
        padding-left 8px
        align-self center


    &__file-size
        font-weight normal
  • URL: /components/raw/cta-button/cta-button.styl
  • Filesystem Path: patterns/bits/cta-button/cta-button.styl
  • Size: 1.7 KB

No notes defined.