Skip to main content

Hero Banner (Image) v1.1.0

Highlight key content or messaging with a bold visual, featuring an image, heading, and call-to-action at the top of a page.

Page Headline Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra feugiat laoreet.

Note: Please note that the demo below showcases the correct usage of the picture element. The current implementation in the product is incorrect and will be updated to align with a "mobile-first" approach.

<div class="hero-banner text-left-top">

  <!-- Partial 1 -->

  <div class="hero-banner__image-wrapper">

    <picture>
      <source media="(min-width: 48.625em)" srcset="https://radancy.dev/component-library/hero-banner/demo-desktop.png">
      <img alt="" src="https://radancy.dev/component-library/hero-banner/demo-mobile.png">
    </picture>

  </div>

  <!-- Partial 2 -->

  <div class="hero-banner__text-wrapper">

    <div class="hero-banner__text-inner-wrapper">

      <h1>Page Headline Here</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra feugiat laoreet.</p>

    </div>

  </div>
 
</div>
/*!

  Radancy Component Library: Hero Banner

  Contributor(s):
  Andrew Hill
  Michael "Spell" Spellacy

  Dependencies: Sass

*/

/* Specify Breakpoint */

$end-banner: 48.625em; // 768px

/* specify max-width to create margins for the text wrapper */

$banner-constrain-wrapper: 87.5rem; // 1400px

/* specify max-width for the text block itself */

$banner-text-maxwidth: 25rem; // 400px

/* Set to zero if you want it flush with edges */

$banner-x-offset: 2.5rem; // 40px

$banner-y-offset: 2.5rem; // 40px

/* Supporting Code */

.hero-banner {
position: relative;

  img {
  display: block;
  min-width: 100%;
  }

  &__text-wrapper {
  position: relative;

  @media (min-width: $end-banner) {

      inset-inline: 0;
      margin: auto;
      position: absolute;

    }

  }

  &__text-inner-wrapper {
  margin: 0 auto;
  max-width: $banner-text-maxwidth;

    @media (min-width: $end-banner) {

      margin: auto;

    }

  }

  @media (min-width: $end-banner) {

    /* Top Alignment Options */

    &.text-left-top {

      .hero-banner__text-wrapper {
      inset-block-start: $banner-y-offset;
      }

      .hero-banner__text-inner-wrapper {
      inset-inline-start: $banner-x-offset;
      position: absolute;
      }

    }

    &.text-right-top {

      .hero-banner__text-wrapper {
      inset-block-start: $banner-y-offset;
      }

      .hero-banner__text-inner-wrapper {
      inset-inline-end: $banner-x-offset;
      position: absolute;
      }

    }

    &.text-center-top {

      .hero-banner__text-wrapper {
      inset-block-start: $banner-y-offset;
      }

      .hero-banner__text-inner-wrapper {
      inset-inline-start: 50%;
      position: absolute;
      transform: translateX(-50%);
      }

    }

    /* Bottom Alignment Options */

    &.text-left-bottom {

      .hero-banner__text-wrapper {
      inset-block-end: $banner-y-offset;
      }

      .hero-banner__text-inner-wrapper {
      position: absolute;
      inset-inline-start: $banner-x-offset;
      inset-block-end: 0;
      }

    }

    &.text-right-bottom {

      .hero-banner__text-wrapper {
      inset-block-end: $banner-y-offset;
      }

      .hero-banner__text-inner-wrapper {
      inset-block-end: 0;
      inset-inline-end: $banner-x-offset;
      position: absolute;
      }

    }

    &.text-center-bottom {

      .hero-banner__text-wrapper {
      inset-block-end: $banner-y-offset;
      }

      .hero-banner__text-inner-wrapper {
      transform: translateX(-50%);
      position: absolute;
      inset-inline-start: 50%;
      inset-block-end: 0;
      }

    }

    /* Center Alignment Options */

    &.text-left-center {

      .hero-banner__text-wrapper {
      inset-block-start: 0;
      inset-block-end: 0;
      }

      .hero-banner__text-inner-wrapper {
      inset-block-start: 50%;
      inset-inline-start: $banner-x-offset;
      position: absolute;
      transform: translateY(-50%);
      }

    }

    &.text-right-center {

      .hero-banner__text-wrapper {
      inset-block-start: 0;
      inset-block-end: 0;
      }

      .hero-banner__text-inner-wrapper {
      inset-block-start: 50%;
      inset-inline-end: $banner-x-offset;
      position: absolute;
      transform: translateY(-50%);
      }

    }

    &.text-center-center {

      .hero-banner__text-wrapper {
      inset-block-start: 0;
      inset-block-end: 0;
      }

      .hero-banner__text-inner-wrapper {
      inset-block-start: 50%;
      inset-inline-start: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      }

    }

  }

  &.constrain {

    .hero-banner__text-wrapper {
    max-width: $banner-constrain-wrapper;
    }

  }

}

Should Your Hero Banner Contain a Heading? Not Always.

Before incorporating an h1 heading into your hero banner, it is important to assess whether a heading truly aligns with your goals. Consider the following:

  1. Is the hero banner a call to action or a branded message? In such cases, treating the banner as a decorative element is preferable, and you should use a div instead of an h1 or lower heading level.
  2. Will your page have two h1 elements if you use a primary heading in your hero banner?
  3. Is there another element elsewhere on the page that is better suited to serve as the primary heading? Frequently, this will be positioned below the hero banner. Often, this should be designated as your h1.
  4. Think in the context of your website structure. The hero banner on the homepage might appropriately represent the overarching message of the site and serve as your h1. While on subpages, it might be more appropriate to use a div, particularly when there's a more suitable heading that can be designated as your h1.

Properties

Use the following properties to configure this component.

Variable Description
$end-banner
This is your breakpoint for when you want to go from mobile to desktop.
$banner-constrain-wrapper
If you need to contain the headline that overlays your hero image with a max-width to match other margins on the page. Used with .constrain class.
$banner-x-offset
Will allow you to choose the horizontal distance you want for your text to be from left or right. This would not apply to horizontally centered classes below.
$banner-y-offset
Will allow you to choose the vertical distance you want for your text to be from top or bottom. This would not apply to vertically centered classes below.

Class Applies To Note Description
.constrain div, section Optional
This will apply a max-width around your text's inner-wrapper so that it can stay within margins used on page. Default would have text area be 100% the width of the viewport.
.text-center-bottom div, section Optional
This will align text with bottom center of the hero banner.
.text-center-center div, section Optional
This will align text with center (horizontal and vertical) of the hero banner.
.text-center-top div, section Optional
This will align text with top center of the hero banner.
.text-left-bottom div, section Optional
This will align text with bottom left of the hero banner.
.text-left-center div, section Optional
This will align text with center left of the hero banner.
.text-left-top div, section Optional
This will align text with top (vertical) left (horizontal) of the hero banner.
.text-right-center div, section Optional
This will align text with center right of the hero banner.
.text-right-bottom div, section Optional
This will align text with bottom right of the hero banner.
.text-right-top div, section Optional
This will align text with top right of the hero banner.

Release Notes

Keep up to date on major changes to this component.

Note
When integrating banners for use in content page settings, the default code in the site theme also includes the structure mentioned above to leverage page-level items.
Note
If you're incorporating banners within sections or modules, follow a two-part approach. In Partial 1, place images within a picture element, and in Partial 2, embed your HTML content. For guidance on the proper implementation of headings in hero banners, please refer to Accessibility: Hero Banner Headings.
Behavior
In this demo, an optional constraint has been set with a maximum width of 1400px horizontally.
Note
It's worth noting that while class names are tailored for left-to-right languages, this is done to accommodate developers and authors who read from left to right. The CSS utilizes CSS Logical Properties to ensure proper rendering in both left-to-right and right-to-left languages.

Report Issues

Find a bug? Want a new feature? Report it on JIRA. You're so awesome!