AFW Pattern Lab

Section Banner 

<div class="section-banner">
    <div class="heading-container">
        <h1 class="heading-container__heading text-center h1-style">Heading Container</h1>
        <p class="heading-container__subheading text-center p-lg">Labore nisi cupidatat non laboris irure magna.</p>
    </div>

    <figure class="section-banner__banner">
        <img src="../../images/special-buys-banner.jpeg" alt="Section Banner Image">
    </figure>

    <div class="section-banner__lower">
        <h4 class="section-banner__subheadline h2-style"></h4>

        <a href="#" class="section-banner__link">Ad Veniam Velit Dolor</a>

    </div>
</div>
 
<div class="section-banner{{modifierClasses|lspace}}">
    {% render '@heading-container', heading, true %}
    {% if banner %}
    <figure class="section-banner__banner{{banner.class|lspace}}">
        <img src="{{banner.src|path}}" alt="{{banner.alt}}">
    </figure>
    {% endif %}
    <div class="section-banner__lower">
        <{{subheadline.tag}} class="section-banner__subheadline{{subheadline.class|lspace}}">{{text}}</{{subheadline.tag}}>
        {% if subtext %}
        <p class="section-banner__subtext">{{subtext.text}}</p>
        {% endif %}
        {% if link %}
        <a href="{{link.href}}" class="section-banner__link">{{link.text}}</a>
        {% endif %}
    </div>
</div>
 
{
  "heading": {
    "tag": "h3",
    "text": "Section Banner Headline",
    "class": "h1-style"
  },
  "headingContainerClass": "section-banner__header",
  "banner": {
    "src": "/images/special-buys-banner.jpeg",
    "alt": "Section Banner Image"
  },
  "subheadline": {
    "tag": "h4",
    "text": "Adipisicing qui consectetur et anim qui fugiat aliquip",
    "class": "h2-style"
  },
  "link": {
    "href": "#",
    "text": "Ad Veniam Velit Dolor"
  },
  "modifierClasses": null
}
  • Content: 
    .section-banner {
    $this: &;

    &__header {}

    &__banner {
        border-radius: rem(8px);
        height: rem(150px);
        margin-bottom: rem(58px);
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
        }

        @include media-lg-up {
            height: rem(280px);
        }
    }

    &__lower {
        text-align: center;
    }

    &__subheadline {
        font-size: rem(21px);
        font-weight: 600;
        line-height: rem(29px);
        margin-bottom: rem(3px);

        @include media-md-up {
            font-size: rem(28px);
            line-height: rem(34px);
            margin-bottom: rem(12px);
        }
    }

    &__subtext {
        font-size: rem(18px);
    }

    &__link {
        color: $color-primary-blue;
        font-size: rem(16px);
        font-weight: 700;
        line-height: rem(19.5px);
        letter-spacing: rem(0.9px);
        text-decoration: none;

        &:focus,
        &:hover {
            color: $color-blue;
        }
    }
}
  • URL: /components/raw/section-banner/section-banner.scss
  • Filesystem Path: source/patterns/organisms/section-banner/section-banner.scss
  • Size: 1 KB

Section Banner

The Section Banner is…

Image Dimensions:

Please make sure your image file names do not include any spaces and/or symbols!

Full Width:

Device Dimensions
Mobile N/A
Desktop 1296×280

Half Width:

Device Dimensions
Mobile N/A
Desktop 1280times;560