Feature Full: Default 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/feature-full.css?cb=">

<div class="feature-full ">
    <div class="feature-full__image  lazy-load-image" data-module="imageLazyLoad">
        <picture>
            <source media="(max-width: 840px)" type="image/png" srcset="https://dummyimage.com/768x1200/000000/545454.png" />
            <source media="(min-width: 841px)" type="image/png" srcset="https://dummyimage.com/1600x900/f0f0f0/545454.png" />
            <img src="https://dummyimage.com/1600x900/f0f0f0/545454.png" loading="lazy" alt="Image Alt Text">
        </picture>
    </div>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell medium-1"></div>
            <div class="cell medium-5">
                <div class="feature-full__content">
                    <span class="feature-full__eyebrow">Label goes here</span>
                    <h2 class="feature-full__title">Heading goes here lorem ipsum dolor sit amet</h2>
                    <p class="feature-full__subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum massa libero, non imperdiet turpis volutpat et. Suspendisse vitae molestie justo, nec lobortis massa. </p>
                    <a href="#" data-module="cta" class="cta feature-full__cta">
                        Discover More
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/feature-full.css?cb={{cacheBuster}}">
{{/if}}

<div class="feature-full {{#if contentOnRight}}feature-full--content-on-right{{/if}}">
    <div class="feature-full__image {{#if imageVerticalPosition}}feature-full__image--{{imageVerticalPosition}}{{/if}} lazy-load-image" data-module="imageLazyLoad">
        {{> @picture image }}
    </div>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell medium-1"></div>
            <div class="cell medium-5">
                <div class="feature-full__content">
                    <span class="feature-full__eyebrow">{{eyebrow}}</span>
                    <h2 class="feature-full__title">{{title}}</h2>
                    <p class="feature-full__subline">{{subline}}</p>
                    {{#if cta}}
                    {{> @link text=cta.text url=cta.url cssClasses="feature-full__cta" }}
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "image": {
    "altText": "Image Alt Text",
    "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
    "fallbackImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
    "sources": [
      {
        "type": "image/png",
        "desktopImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
        "mobileImageUrl": "https://dummyimage.com/768x1200/000000/545454.png"
      }
    ]
  },
  "eyebrow": "Label goes here",
  "title": "Heading goes here lorem ipsum dolor sit amet",
  "subline": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum massa libero, non imperdiet turpis volutpat et. Suspendisse vitae molestie justo, nec lobortis massa. ",
  "cta": {
    "url": "#",
    "text": "Discover More"
  }
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.feature-full {
    position: relative;

    @include breakpoint(medium) {
        overflow: hidden;
        padding: rem(125) 0;
    }

    &--content-on-right {
        .grid-x {
            flex-direction: row-reverse;
        }
    }

    &__image {
        padding-bottom: 80%;
        width: 100%;
        z-index: -1;

        @include breakpoint(medium) {
            background-position-y: center;
            bottom: 0;
            padding: 0;
            position: absolute;
            right: 0;
            top: 0;

            &--top {
                background-position-y: top;
            }

            &--bottom {
                background-position-y: bottom;
            }
        }
    }

    &__content {
        background-color: $color-white;
        margin-top: rem(-80);
        padding: rem(22);

        @include breakpoint(medium) {
            margin-top: 0;
            padding: rem(44);
        }
    }

    &__eyebrow {
        @extend %p--lead;
        margin-bottom: rem(12);
    }

    &__title {
        @extend %heading02;
        margin-bottom: rem(28);
    }

    &__subline {
        margin-bottom: rem(28);
    }

    &__cta {
        @extend %primary-cta;
    }
}
  • URL: /components/raw/feature-full/feature-full.scss
  • Filesystem Path: source/patterns/03-components/media/feature-full/feature-full.scss
  • Size: 1.3 KB

No notes defined.