Custom theme (replace with client name)

Call To Action 

<div class="cta cta-- ">
        <div class="cta__container">
            <h3 class="cta__header"></h3>
            <div class="cta__description"> </div>
            <div class="cta-button cta-button--dark  ">
                <a href="" class="cta-button__link">
                    <span class="cta-button__title"></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>
        {% include 'bits/cta-button/cta-button.twig' with {
            'linkText':  cta.linkText,
            'link':  cta.link,
            'background': cta.background == ('dark' or 'none') ? 'light' : 'dark',
            'icon': icon,
            'isHome': isHome
        }%}
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .cta
    --textColor white
    --backgroundColor sapphire

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

    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: 861 Bytes

No notes defined.