E3 Alliance Pattern Library

Call To Action: Cta Button Small 

<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  cta-button--small">
                    <span class="cta-button__title">
                        Learn More
                    </span>
                    <div class="cta-button__icon">
                        <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.1875 6.9707L9.1875 11.9707C8.8125 12.377 8.15625 12.377 7.78125 11.9707C7.375 11.5957 7.375 10.9395 7.78125 10.5645L11.0625 7.25195H1.5C0.9375 7.25195 0.5 6.81445 0.5 6.25195C0.5 5.7207 0.9375 5.25195 1.5 5.25195H11.0625L7.78125 1.9707C7.375 1.5957 7.375 0.939453 7.78125 0.564453C8.15625 0.158203 8.8125 0.158203 9.1875 0.564453L14.1875 5.56445C14.5938 5.93945 14.5938 6.5957 14.1875 6.9707Z" fill="#ACEB8A" />
                        </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": "internal"
  },
  "buttonSize": "small"
}
  • 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.