<div class="container">
<div class="banner banner--2">
<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:768px)" srcset="https://placehold.co/512x384/000000/333333/png" alt="Banner Placeholder Image">
<img src="https://placehold.co/1400x600/000000/333333/png" alt="Banner Placeholder Image">
</picture>
<div class="banner-card__content banner-card__content--bg banner-card__content--center-bottom banner-card__content--lg--center-bottom" style="background:#EF5832;">
<h1 class="banner-card__title display-4">Celebrating 49 Years!</h1>
<h2 class="banner-card__subtitle">AFW has something for every budget</h2>
<div class="banner-card__button">
<a class="a-btn a-btn--stars" href="/weekly-ads">
Celebrate With 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">
<p class="banner-card__title h2-style pr-16">Your Favorite Items Are <strong>In-Stock</strong> & Ready To Take Home Today!</p>
<p class="banner-card__subtitle h3-style pr-16">1000’0 of items available!</p>
<div class="banner-card__button">
<a class="a-btn a-btn--bermuda" href="/">
Learn More
</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": "https://placehold.co/512x384/000000/333333/png",
"alt": "Banner Placeholder Image",
"query": "(max-width:768px)"
},
{
"src": "https://placehold.co/1400x600/000000/333333/png",
"alt": "Banner Placeholder Image"
}
],
"title": {
"tag": "h1",
"text": "Celebrating 49 Years!",
"class": "display-4"
},
"subtitle": {
"tag": "h2",
"text": "AFW has something for every budget"
},
"button": {
"tag": "a",
"href": "/weekly-ads",
"text": "Celebrate With Savings",
"style": "stars"
},
"halign": "center",
"valign": "bottom",
"halignLg": "center",
"valignLg": "bottom"
},
"secondary": [
{
"isActive": true,
"displayOrder": 0,
"size": "sm",
"image": {
"src": "https://placeholder.com/512x384.png",
"alt": "Banner Placeholder Image"
},
"title": {
"tag": "p",
"text": "Your Favorite Items Are <strong>In-Stock</strong> & Ready To Take Home Today!",
"class": "h2-style pr-16"
},
"subtitle": {
"tag": "p",
"text": "1000’0 of items available!",
"class": "h3-style pr-16"
},
"button": {
"tag": "a",
"href": "/",
"text": "Learn More",
"style": "bermuda"
},
"halign": "left",
"valign": "bottom",
"halignLg": "left",
"valignLg": "bottom"
}
]
}
.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)});
}
}
}
}
}
}
No notes defined.