AFW Pattern Lab

Banner 

<div class="container">
    <div class="banner banner--5">
        <div class="banner__items">
            <div class="banner__items__primary">

                <div class="bg-black banner-card banner-card--lg banner-card--light">

                    <picture aria-hidden="true" class="banner-card__image">

                        <source media="(max-width:992px)" srcset="../../images/banners/512x438.png" alt="Banner Placeholder Image">

                        <img src="../../images/banners/1400x600_og.png" alt="Banner Placeholder Image">

                    </picture>

                    <div class="banner-card__content banner-card__content--bg banner-card__content--center-bottom banner-card__content--lg--left-center" style="background:#EF5832;">

                        <h1 class="banner-card__title">From <strong>FALL SAVINGS</strong> to <strong>AUTUMN ELEGANCE</strong></h1>

                        <h2 class="banner-card__subtitle">AFW has something for every budget</h2>

                        <div class="banner-card__button">

                            <a class="a-btn a-btn--default" href="/weekly-ads">

                                Explore Savings

                            </a>

                        </div>

                    </div>

                </div>

            </div>
            <div class="banner__items__secondary">

                <div class="bg-black banner-card banner-card--sm">

                    <div aria-hidden="true" class="banner-card__image">
                        <img src="https://placeholder.com/512x384.png" alt="Banner Placeholder Image">
                    </div>

                    <div class="banner-card__content banner-card__content--left-bottom banner-card__content--lg--left-bottom">

                        <h3 class="banner-card__title h2-style pr-32">Your Favorite Items Are <strong>In&#8209;Stock</strong> &amp; Ready To Take Home Today!</h3>

                        <h4 class="banner-card__subtitle h3-style pr-32">1000&rsquo;s of items available!</h4>

                        <div class="banner-card__button">

                            <a class="a-btn a-btn--bermuda" href="/">

                                Learn More

                            </a>

                        </div>

                    </div>

                </div>

                <div class="bg-black banner-card banner-card--sm">

                    <div aria-hidden="true" class="banner-card__image">
                        <img src="https://placeholder.com/512x384.png" alt="Banner Placeholder Image">
                    </div>

                    <div class="banner-card__content banner-card__content--center-center banner-card__content--lg--center-center">

                        <h3 class="banner-card__title">$1,199</h3>

                        <h3 class="banner-card__subtitle">Brant Pillow Top Queen Mattress</h3>

                        <div class="banner-card__button">

                            <a class="a-btn a-btn--primary" href="/">

                                AFW Anniversary Sale

                            </a>

                        </div>

                    </div>

                </div>

                <div class="bg-black banner-card banner-card--sm">

                    <div aria-hidden="true" class="banner-card__image">
                        <img src="https://placeholder.com/512x384.png" alt="Banner Placeholder Image">
                    </div>

                    <div class="banner-card__content banner-card__content--right-center banner-card__content--lg--right-center">

                        <h3 class="banner-card__title h4-style pl-32">Finding The Perfect Gift Just Got Easier!</h3>

                        <h4 class="banner-card__subtitle h2-style pl-32">Give the lasting gift of style and comfort this holiday season with AFW.</h4>

                        <div class="banner-card__button">

                            <a class="a-btn a-btn--secondary" href="/">

                                Buy Online

                            </a>

                        </div>

                    </div>

                </div>

                <div class="bg-black banner-card banner-card--sm">

                    <div aria-hidden="true" class="banner-card__image">
                        <img src="https://placeholder.com/512x384.png" alt="Banner Placeholder Image">
                    </div>

                    <div class="banner-card__content banner-card__content--left-top banner-card__content--lg--left-top">

                        <h3 class="banner-card__title">Furniture Financing</h3>

                        <h4 class="banner-card__subtitle">To Fit Your Budget!</h4>

                        <div class="banner-card__button">

                            <a class="a-btn a-btn--default" href="/">

                                Apply Today!

                            </a>

                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="container">
    <div class="banner banner--{{1+secondary|length}}">
        <div class="banner__items">
            <div class="banner__items__primary">
            {% render '@banner-card', primary %}
            </div>
            <div class="banner__items__secondary">
            {% for banner in secondary -%}
            {% render '@banner-card', banner %}
            {%- endfor %}
            </div>
        </div>
    </div>
</div>
 
{
  "primary": {
    "isActive": true,
    "displayOrder": 0,
    "size": "lg",
    "textColor": "light",
    "textBackground": "#EF5832",
    "textBackgroundIsGradient": false,
    "images": [
      {
        "src": "/images/banners/512x438.png",
        "alt": "Banner Placeholder Image",
        "query": "(max-width:992px)"
      },
      {
        "src": "/images/banners/1400x600_og.png",
        "alt": "Banner Placeholder Image"
      }
    ],
    "title": {
      "tag": "h1",
      "text": "From <strong>FALL SAVINGS</strong> to <strong>AUTUMN ELEGANCE</strong>"
    },
    "subtitle": {
      "tag": "h2",
      "text": "AFW has something for every budget"
    },
    "button": {
      "tag": "a",
      "href": "/weekly-ads",
      "text": "Explore Savings",
      "style": "default"
    },
    "halign": "center",
    "valign": "bottom",
    "halignLg": "left",
    "valignLg": "center"
  },
  "secondary": [
    {
      "isActive": true,
      "displayOrder": 0,
      "size": "sm",
      "image": {
        "src": "https://placeholder.com/512x384.png",
        "alt": "Banner Placeholder Image"
      },
      "title": {
        "tag": "h3",
        "text": "Your Favorite Items Are <strong>In&#8209;Stock</strong> &amp; Ready To Take Home Today!",
        "class": "h2-style pr-32"
      },
      "subtitle": {
        "tag": "h4",
        "text": "1000&rsquo;s of items available!",
        "class": "h3-style pr-32"
      },
      "button": {
        "tag": "a",
        "href": "/",
        "text": "Learn More",
        "style": "bermuda"
      },
      "halign": "left",
      "valign": "bottom",
      "halignLg": "left",
      "valignLg": "bottom"
    },
    {
      "isActive": true,
      "displayOrder": 0,
      "size": "sm",
      "image": {
        "src": "https://placeholder.com/512x384.png",
        "alt": "Banner Placeholder Image"
      },
      "title": {
        "tag": "h3",
        "text": "$1,199"
      },
      "subtitle": {
        "tag": "h3",
        "text": "Brant Pillow Top Queen Mattress"
      },
      "button": {
        "tag": "a",
        "href": "/",
        "text": "AFW Anniversary Sale",
        "style": "primary"
      },
      "halign": "center",
      "valign": "center",
      "halignLg": "center",
      "valignLg": "center"
    },
    {
      "isActive": true,
      "displayOrder": 0,
      "size": "sm",
      "image": {
        "src": "https://placeholder.com/512x384.png",
        "alt": "Banner Placeholder Image"
      },
      "title": {
        "tag": "h3",
        "text": "Finding The Perfect Gift Just Got Easier!",
        "class": "h4-style pl-32"
      },
      "subtitle": {
        "tag": "h4",
        "text": "Give the lasting gift of style and comfort this holiday season with AFW.",
        "class": "h2-style pl-32"
      },
      "button": {
        "tag": "a",
        "href": "/",
        "text": "Buy Online",
        "style": "secondary"
      },
      "halign": "right",
      "valign": "center",
      "halignLg": "right",
      "valignLg": "center"
    },
    {
      "isActive": true,
      "displayOrder": 0,
      "size": "sm",
      "image": {
        "src": "https://placeholder.com/512x384.png",
        "alt": "Banner Placeholder Image"
      },
      "title": {
        "tag": "h3",
        "text": "Furniture Financing"
      },
      "subtitle": {
        "tag": "h4",
        "text": "To Fit Your Budget!"
      },
      "button": {
        "tag": "a",
        "href": "/",
        "text": "Apply Today!",
        "style": "default"
      },
      "halign": "left",
      "valign": "top",
      "halignLg": "left",
      "valignLg": "top"
    }
  ]
}
  • Content: 
    .banner {
    $this: &;

    position: relative;
    margin-bottom: rem(32px);
    z-index: 0;

    &__items {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: rem(8px);
    }

    &__items__primary {
        flex: 0 0 100%;
    }

    &__items__secondary {
        display: flex;
        flex: 0 0 100%;
        gap: rem(8px);
    }

    &--1 {
        #{$this}__items {
            &__primary {
                flex: 0 0 100%;
                width: 100%;

                .banner-card {
                    width: 100%;
                }
            }
        }
    }

    &--2 {
        #{$this}__items {
            &__primary {
                flex: 0 0 100%;

                @include media-lg-up {
                    flex: 0 0 66%;
                }
            }

            &__secondary {
                flex: 1 0 100%;

                .banner-card {
                    flex: 1 1 100%;
                }

                @include media-lg-up {
                    flex : 1 0 calc(33%);
                }
            }
        }
    }

    &--3 {
        #{$this}__items {
            &__primary {
                flex: 0 0 100%;

                .banner-card {
                    height: 100%;
                }

                @include media-lg-up {
                    flex: 0 0 66%;
                }

            }

            &__secondary {
                flex: 0 0 100%;
                flex-wrap: wrap;

                .banner-card {
                    flex: 0 0 100%;
                }
                
                @include media-lg-up {
                    flex: 0 0 33%;
                }

            }
        }
    }

    &--4 {
        #{$this}__items {
            &__secondary {
                flex-wrap: wrap;

                .banner-card {
                    flex: 1 0 100%;

                    @include media-lg-up {
                        flex: 1 1 calc(33% - #{rem(8px)});
                    }
                }
            }
        }
    }

    &--5 {
        #{$this}__items {
            &__secondary {
                flex-wrap: wrap;

                .banner-card {
                    flex: 1 0 100%;

                    @include media-lg-up {
                        flex: 1 1 calc(50% - #{rem(8px)});
                    }

                    @include media-xl-up {
                        flex: 1 1 calc(25% - #{rem(8px)});
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/banner/banner.scss
  • Filesystem Path: source/patterns/organisms/banner/banner.scss
  • Size: 2.5 KB

No notes defined.