AFW Pattern Lab

Section CTA 

<div class="section-cta" style="background: url(/images/make-it-pop-bg.png);">
    <div class="section-cta__wrapper">
        <div class="section-cta__inner">
            <div class="section-cta__left">
                <div class="image-rotator" data-rotator-interval="1000">
                    <figure class="image-rotator__image image-rotator__image--1">
                        <img src="../../images/product/home-decor-1.png" alt="Image Rotator - Image 1">
                    </figure>
                    <figure class="image-rotator__image image-rotator__image--2">
                        <img src="../../images/product/home-decor-2.png" alt="Image Rotator - Image 2">
                    </figure>
                    <figure class="image-rotator__image image-rotator__image--3">
                        <img src="../../images/product/home-decor-3.png" alt="Image Rotator - Image 3">
                    </figure>
                </div>
            </div>
            <div class="section-cta__right">

                <h3 class="section-cta__heading h1-style">
                    </>

                    <p class="section-cta__subtext">Voluptate Lorem excepteur eu velit enim do quis incididunt dolore non.</p>

                    <a class="a-btn a-btn--default btn--primary">

                        Reprehenderit Magna Sunt

                    </a>

            </div>
        </div>
    </div>
</div>
 
<div class="section-cta{{modifierClasses|lspace}}" style="background: url({{background.src}});">
    <div class="section-cta__wrapper">
        <div class="section-cta__inner">
            <div class="section-cta__left">
                {% render '@image-rotator' %}
            </div>
            <div class="section-cta__right">
                {% if heading %}
                <{{heading.tag}} class="section-cta__heading{{heading.class|lspace}}">{{text}}</{{tag}}>
                {% endif %}
                {% if subtext %}
                <{{subtext.tag}} class="section-cta__subtext{{subtext.class|lspace}}">{{subtext.text}}</{{subtext.tag}}>
                {% endif %}
                {% if button %}
                {% render '@button', button, true %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
 
{
  "background": {
    "src": "/images/make-it-pop-bg.png",
    "alt": "Section CTA Background Image"
  },
  "heading": {
    "tag": "h3",
    "class": "h1-style",
    "text": "Qui nisi deserunt amet"
  },
  "subtext": {
    "tag": "p",
    "class": null,
    "text": "Voluptate Lorem excepteur eu velit enim do quis incididunt dolore non."
  },
  "button": {
    "tag": "a",
    "class": "btn--primary",
    "text": "Reprehenderit Magna Sunt"
  },
  "modifierClasses": null
}
  • Content: 
    .section-cta {
    $this: &;

    display: flex;
    align-items: center;
    justify-content: stretch;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    min-height: rem(380px);
    position: relative;

    &__wrapper {
        @include container;
    }

    &__inner {
        @include row;
        align-items: center;
    }

    &__left {
        @extend .col-6;
    }

    &__image {}

    &__right {
        @extend .col-6;
    }

    &__heading {}

    &__subtext {}

    &__button {}
}
  • URL: /components/raw/section-cta/section-cta.scss
  • Filesystem Path: source/patterns/organisms/section-cta/section-cta.scss
  • Size: 581 Bytes

No notes defined.