E3 Alliance Pattern Library

Call To Action: Cta External 

<div class="cta cta--dark ">
        <div class="cta__container">
            <h3 class="cta__header">Call to Action</h3>
            <div class="cta__description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.</div>
            <div class="cta__link">
                <a href="#" class="cta-button cta-button--light  ">
                    <span class="cta-button__title">
                        Learn More
                    </span>
                    <div class="cta-button__icon">
                        <svg class="external-link" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path class="_mark external-link__shape" d="M12.75 10.75C13.3145 10.75 13.8125 11.248 13.8125 11.8125V15C13.8125 16.1953 12.8496 17.125 11.6875 17.125H2.125C0.929688 17.125 0 16.1953 0 15V5.4375C0 4.27539 0.929688 3.3125 2.125 3.3125H5.3125C5.87695 3.3125 6.375 3.81055 6.375 4.375C6.375 4.97266 5.87695 5.4375 5.3125 5.4375H2.125V15H11.6875V11.8125C11.6875 11.248 12.1523 10.75 12.75 10.75ZM16.668 0.457031C16.8672 0.65625 17 0.921875 17 1.1875V6.5C17 7.09766 16.4355 7.5625 15.9043 7.5625C15.3398 7.5625 14.875 7.09766 14.875 6.5V3.77734L7.4375 11.2812C7.00586 11.7129 6.3418 11.7129 5.91016 11.2812C5.51172 10.8828 5.51172 10.2188 5.91016 9.78711L13.3809 2.2168H10.625C10.0605 2.2168 9.5625 1.75195 9.5625 1.1875C9.5625 0.623047 10.0273 0.125 10.625 0.125H15.9375C16.2031 0.125 16.4688 0.257812 16.668 0.457031Z" fill="#88C965" />
                        </svg>
                    </div>
                </a>
            </div>
        </div>
    </div>
 
{% if cta.type == 'internal'%}
    {% set icon = 'right-arrow' %}
{% else %}
    {% set icon = 'external-link' %}
{% endif %}
<div class="cta cta--{{ cta.background }} {{ isHome ? 'cta--home' : '' }}">
    <div class="cta__container">
        <h3 class="cta__header">{{ cta.header }}</h3>
        <div class="cta__description"> {{ cta.description }}</div>
        <div class="cta__link">
        {% include 'bits/cta-button/cta-button.twig' with {
            'linkText':  cta.linkText,
            'link':  cta.link,
            'background': cta.background == ('dark') ? 'light' : 'dark',
            'icon': icon,
            'isHome': isHome,
            'size': buttonSize
        }%}
        </div>
    </div>
</div>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "cta": {
    "link": "#",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.",
    "linkText": "Learn More",
    "header": "Call to Action",
    "background": "dark",
    "type": "external"
  }
}
  • Content: 
    .cta
    --textColor white
    --backgroundColor sapphire

    &--dark
        --backgroundColor sapphire
        --textColor white
    &--light
        --backgroundColor white
        --textColor jet
    &--none
    &--home
        --backgroundColor transparent
        --textColor white

    background-color var(--backgroundColor)
    fluid('padding', 24px, 48px)

    &__container
        display grid
        grid-template-columns 1fr
        grid-gap 24px

    &__header
    &__description
        color var(--textColor)

    &__header
        @extends $headline3
        line-height 1.5

    &__description
        line-height 1.8
        padding-bottom 18px

    &--home
        padding 0

        .cta__header
            @extends $headline1
            font-weight 700
            color var(--textColor)

        .cta__description
            @extends $bodyLarge
  • URL: /components/raw/call-to-action/call-to-action.styl
  • Filesystem Path: patterns/partials/call-to-action/call-to-action.styl
  • Size: 873 Bytes

No notes defined.