Banner Card: Lg Right Center

Prototype

HTML
View
Context
Assets
Info
Notes
Accessibility


        
        <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="../../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--right-center" style="background:#EF5832;">

        <h1 class="banner-card__title">From FALL SAVINGS to AUTUMN ELEGANCE</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="#">

                Explore Savings

            </a>

        </div>

    </div>

</div>


        {% macro gradient(color, hdir, vdir) %}
{% switch hdir %}
{% case 'left' %}
background:linear-gradient(to right, {{color}} 0%, {{color}} 35%, transparent 40%);
{% case 'right' %}
background:linear-gradient(to left, {{color}} 0%, {{color}} 35%, transparent 40%);   
{% case 'center' %}
background:linear-gradient(to right, transparent 0%, {{color}} 33%, {{color}} 66%, transparent 100%);
{% endswitch %}
{% endmacro %}


<div class="bg-black banner-card banner-card--{{size}}{% if textColor %} banner-card--{{textColor}}{% endif %}{% if product %} banner-card--product{% endif %}">
    {% if images %}
    <picture aria-hidden="true" class="banner-card__image">
    {% for image in images %}
        {% if image.query %}
        <source media="{{image.query|safe}}" srcset="{{image.src|path}}" alt="{{image.alt}}">
        {% else %}
        <img src="{{image.src|path}}" alt="{{image.alt}}">
        {% endif %}
    {% endfor %}
    </picture>
    {% elif image %}
    <div aria-hidden="true" class="banner-card__image">
        <img src="{{image.src|path}}" alt="{{image.alt}}">
    </div>
    {% endif %}
    {% if textBackground and textBackgroundIsGradient %}
    <div class="banner-card__overlay--mobile" style="{{gradient(textBackground, halign, valign)}}"></div>
    <div class="banner-card__overlay--desktop" style="{{gradient(textBackground, halignLg, valignLg)}}"></div>
    {% endif %}
    <div class="banner-card__content{% if textBackground and not textBackgroundIsGradient %} banner-card__content--bg{% endif %} banner-card__content--{{halign}}-{{valign}} banner-card__content--lg--{{halignLg}}-{{valignLg}}"{% if textBackground and not textBackgroundIsGradient %} style="background:{{textBackground}};"{% endif %}>
        {% if product %}
            <span class="banner-card__price text--price">{{product.price|usd}}</span>
            <span class="banner-card__title{{title.class|lspace}}">{{product.title}}</span>
            <span class="banner-card__subtitle{{subtitle.class|lspace}}">({{product.sku}})</span>
            <span class="banner-card__manufacture">By {{product.manufacture}}</span>
        {% else %}
            {% if title %}
            <{{title.tag}} class="banner-card__title{{title.class|lspace}}">{{title.text|safe}}</{{title.tag}}>
            {% endif %}
            {% if subtitle %}
            <{{subtitle.tag}} class="banner-card__subtitle{{subtitle.class|lspace}}">{{subtitle.text|safe}}</{{subtitle.tag}}>
            {%- endif %}
        {% endif %}
        {% if button %}
        <div class="banner-card__button">
        {% render '@button', button %}
        </div>
        {% endif %}
    </div>
    {% if disclaimer.text %}
    <div class="banner-card__disclaimer banner-card__disclaimer--{{disclaimer.halign}}-{{disclaimer.valign}}">
    {{disclaimer.text|safe}}
    </div>
    {% endif %}
</div>


        
            
            {
  "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:768px)"
    },
    {
      "src": "/images/banners/1400x600_og.png",
      "alt": "Banner Placeholder Image"
    }
  ],
  "title": {
    "tag": "h1",
    "text": "From FALL SAVINGS to AUTUMN ELEGANCE"
  },
  "subtitle": {
    "tag": "h2",
    "text": "AFW has something for every budget"
  },
  "product": null,
  "button": {
    "tag": "a",
    "href": "#",
    "text": "Explore Savings",
    "style": "default"
  },
  "halign": "center",
  "valign": "bottom",
  "halignLg": "right",
  "valignLg": "center"
}

File:

Content:


                                .banner-card {
    $this: &;
    
    border-radius: rem(8px);
    position: relative;
    overflow: hidden;

    display: block;
    align-items: center;
    justify-content: center;

    &__image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;

        img {
            width: 100%;
            height: 100%;
            display: inline-block;
            object-fit: cover;
            object-position: center center;
        }
    }

    &__overlay {
        &--mobile {
            display: block;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
    
            @include media-md-up {
                display: none;
            }
        }

        &--desktop {
            display: none;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
    
            @include media-md-up {
                display: block;
            }
        }
    }

    &__content,
    &__disclaimer {
        display: inline-flex;
        flex-direction: column;
        position: absolute;
        z-index: 1;
    }

    &__content,
    &__disclaimer {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;

        @include media-md-down {
            &--left-top {
                top: 0;
                left: 0;
                text-align: left;

                &#{$this}__content--bg {
                    top: rem(16px);
                    left: rem(16px);
                }
            }
    
            &--center-top {
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;

                &#{$this}__content--bg {
                    top: rem(16px);
                }
            }
    
            &--right-top {
                top: 0;
                right: 0;
                text-align: right;

                &#{$this}__content--bg {
                    top: rem(16px);
                    right: rem(16px);
                }
            }
    
            &--left-center {
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                text-align: left;

                &#{$this}__content--bg {
                    left: rem(16px);
                }
            }
    
            &--center-center {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
            }
    
            &--right-center {
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                text-align: right;

                &#{$this}__content--bg {
                    right: rem(16px);
                }
            }
    
            &--left-bottom {
                left: 0;
                bottom: 0;
                text-align: left;

                &#{$this}__content--bg {
                    left: rem(16px);
                    bottom: rem(16px);
                }
            }
    
            &--center-bottom {
                left: 50%;
                bottom: 0;
                transform: translate(-50%);
                text-align: center;

                &#{$this}__content--bg {
                    bottom: rem(16px);
                }
            }
    
            &--right-bottom {
                right: 0;
                bottom: 0;
                text-align: right;

                &#{$this}__content--bg {
                    right: rem(16px);
                    bottom: rem(16px);
                }
            }
        }

        @include media-md-up {
            &--lg--left-top {
                top: 0;
                left: 0;
                text-align: left;

                &#{$this}__content--bg {
                    top: rem(16px);
                    left: rem(16px);
                }
            }
    
            &--lg--center-top {
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;

                &#{$this}__content--bg {
                    top: rem(16px);
                }
            }
    
            &--lg--right-top {
                top: 0;
                right: 0;
                text-align: right;
                
                &#{$this}__content--bg {
                    top: rem(16px);
                    right: rem(16px);
                }
            }
    
            &--lg--left-center {
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                text-align: left;

                &#{$this}__content--bg {
                    left: rem(16px);
                }
            }
    
            &--lg--center-center {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
            }
    
            &--lg--right-center {
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                text-align: right;

                &#{$this}__content--bg {
                    right: rem(16px);
                }
            }
    
            &--lg--left-bottom {
                left: 0;
                bottom: 0;
                text-align: left;
                
                &#{$this}__content--bg {
                    left: rem(16px);
                    bottom: rem(16px);
                }
            }
    
            &--lg--center-bottom {
                left: 50%;
                bottom: 0;
                transform: translate(-50%);
                text-align: center;

                &#{$this}__content--bg {
                    bottom: rem(16px);
                }
            }
    
            &--lg--right-bottom {
                right: 0;
                bottom: 0;
                text-align: right;

                &#{$this}__content--bg {
                    right: rem(16px);
                    bottom: rem(16px);
                }
            }
        }
    }

    &__disclaimer {
        font-size: rem(12px);
    }

    &__price,
    &__title,
    &__subtitle,
    &__manufacture {
        padding: 0;
        margin: 0;
    }

    &__price {
        @extend .h1-style !optional;
    }
    
    &__title {
        font-size: rem(25.5px);
        line-height: 1;
        margin-bottom: rem(4px);
        @include media-lg-up {
            font-size: rem(36px);
            margin-bottom: rem(8px);
        }
    }
    
    &__subtitle {
        font-size: rem(19.5px);
        font-weight: 400 !important;
        line-height: 1;
        @include media-lg-up {
            font-size: rem(25.5px);
        }
    }
    
    &__manufacture {
        @extend .h3-style !optional;
    }

    &__button {
        margin-top: rem(8px);
    }

    &--sm {
        min-height: rem(280px);
        
        @include media-lg-up {
            // max-width: rem(512px);
        }

        #{$this}__title {
            font-size: rem(19.5px);
            @include media-lg-up {
                font-size: rem(25.5px);
            }
        }

        #{$this}__subtitle {
            font-size: rem(16px);
            font-weight: 400 !important;
            @include media-lg-up {
                font-size: rem(19.5px);
            }
        }

        #{$this}__content {
            padding: rem(16px);
            &#{$this}__content--left-top,
            &#{$this}__content--lg--left-top,
            &#{$this}__content--left-center,
            &#{$this}__content--lg--left-center,
            &#{$this}__content--left-bottom,
            &#{$this}__content--lg--left-bottom,
            &#{$this}__content--right-top,
            &#{$this}__content--lg--right-top,
            &#{$this}__content--right-center,
            &#{$this}__content--lg--right-center,
            &#{$this}__content--right-bottom,
            &#{$this}__content--lg--right-bottom {
                width: 100%;

                @include media-sm-up {
                    width: 66%;
                }

                @include media-lg-up {
                    width: 100%;
                }
            }
            
            &#{$this}__content--center-top,
            &#{$this}__content--lg--center-top,
            &#{$this}__content--center-center,
            &#{$this}__content--lg--center-center,
            &#{$this}__content--center-bottom,
            &#{$this}__content--lg--center-bottom {
                width: 100%;
            }
        }
    }

    &--lg {
        min-height: rem(336px);
        max-width: rem(1400px);
        
        @include media-lg-up {
            min-height: rem(336px);
        }

        #{$this}__content {
            padding: rem(16px);
            @include media-md-up {
                padding: rem(32px);
            }

            &#{$this}__content--center-top,
            &#{$this}__content--lg--center-top,
            &#{$this}__content--center-center,
            &#{$this}__content--lg--center-center,
            &#{$this}__content--center-bottom,
            &#{$this}__content--lg--center-bottom {
                width: 100%;

                @include media-md-up {
                    width: 33%;
                }
            }

            &#{$this}__content--left-top,
            &#{$this}__content--lg--left-top,
            &#{$this}__content--left-center,
            &#{$this}__content--lg--left-center,
            &#{$this}__content--left-bottom,
            &#{$this}__content--lg--left-bottom,
            &#{$this}__content--right-top,
            &#{$this}__content--lg--right-top,
            &#{$this}__content--right-center,
            &#{$this}__content--lg--right-center,
            &#{$this}__content--right-bottom,
            &#{$this}__content--lg--right-bottom {
                width: 100%;

                @include media-md-up {
                    width: 33%;
                }
            }

        }
    }

    &--light {
        #{$this}__content,
        #{$this}__disclaimer {
            color: $color-white;
            > * {
                color: $color-white;
            }
        }
    }

    &--dark {
        #{$this}__content,
        #{$this}__disclaimer {
            color: $color-primary-text;
            > * {
                color: $color-primary-text;
            }
        }
    }
}

URL: /components/raw/banner-card/banner-card.scss
Filesystem Path: source/patterns/molecules/banner-card/banner-card.scss
Size: 10.6 KB

Handle: @banner-card--lg-right-center
Variants (18): Default , Lg Left Center , Lg Left Bottom , Lg Center Top , Lg Center Center , Lg Center Bottom , Lg Right Top , Lg Right Center , Lg Right Bottom , Sm Left Top , Sm Left Center , Sm Left Bottom , Sm Center Top , Sm Center Center , Sm Center Bottom , Sm Right Top , Sm Right Center , Sm Right Bottom
Preview:
- With layout
- Component only
Filesystem Path: source/patterns/molecules/banner-card/banner-card.njk
References (1): @button

No notes defined.