Hero Basics

1. div.hero-new - This element surrounds the entire hero section of the page. The styling of this element includes: display flex, flex-flow wrap, top padding of 30px, and z-index of 1. At a viewport width of less than 1140px, the top padding is reduced to 0.
   1. div.hero__banner-right - This element sits above the main visual component of the hero section and houses social icons, chat buttons, etc. The styling of this element includes: display flex, justify content flex-end (to move content to the far right), max width of 1140px, width of 100%, top margin of -30px, left and right margin of auto, and top and bottom padding of 10px. At a viewport width of less than 1140px, the top margin is reduced to 0 while the left and right margins are set to 5%. All direct descedants receive 20px padding on the left.
   2. div.hero__wrapper-rel - This element is the main visual component of the hero section and houses the breadcrumbs, page title, and hero image/copy. The styling of this element includes: display flex, width 100%, position relative, overflow hidden, max width of 1300px, margin left and right of auto, and the standard border radius (8px). At a viewport width of less than 1300px, border radius is reduced to 0. At a viewport width of tablet and down, the height and min height are reset to auto.
      1. div.page-header__abs - This element contains the page's breadcrumbs as well as the page title (h1 tag). The styling of this element includes: position absolute, left 80px, top: 30px, and a z-index of 5. At a viewport width of less than 1300px, the left attribute is adjusted to 5%.
         1. nav > ul.nav__breadcrumbs - This is the standard treatment for the breadcrumbs which relies on the h1 tag to be placed in an li within this ul. This will then adjust the size, weight, and placement of the h1 tag.
      2. div.content__* - This element structurally defines how the content within the hero__wrapper-rel container is displayed. The first, direct sibling of div.page-header__abs receives padding on top of 50px (25px at mobile) to shift internal content below the div.page-header__abs content. This prevents collisions.
         1. div.contain - This element goes within the div.content__* element and houses text or floating images to be displayed in the hero section. The width of this element is adjusted to fit 100% of the space available less 10vw (5vw on either side via standard .contain styling of margin: 0 auto).
      3. div.content__full-width.content__has-bkg-img(-contain) - This element can be used to place a full background image on the hero section. Use style="background-image: url('...')" on this element as well as title="..." to define the image and set the hover text for the image. Then, within this element use additional div.content__* elements to add additional text sections or images to the hero section.
   3. div.hero__cta-new - This element contains specific call out text or calls to action that belong in the hero section of the page. The styling of this element includes: display flex with row wrap, text align center, a 1px gray bottom border, max width of 1140px, width of 100%, and margin left and right of auto. At a viewport width of less than 1140px, the top margin is reduced to 0 while the left and right margins are set to 5%.
      1. *.hero__cta-item - This can be any dom element within the hero__cta-new container that should be treated as a cta item. The styling of this element includes: flex-grow of 1, padding of 15px all around, position relative, display flex with row wrap, align items center, and justify content center. At a viewport width of mobile or less, the width of these items are adjusted to 100%. All elements with this class that are not the last child within the hero__cta-new container, receive a separator via an :after psuedo element. At a viewpoint of mobile or less, this separator is removed.
         1. *.icon - Elements with the icon class receive additional styling when used within an element carrying the hero__cta-item class. This styling includes margin of 15px on the left and right. This provides space between the icon and any text before or after it.
      2. a.hero__cta-item - These link elements within the hero__cta-new receive a animated bottom border via a :before pseudo element.

Additional Common Styling

1. .page-header__white - This class, placed on the div.page-header__abs or div.page-header__rel element, will force font color and the breadcrumb chevrons to be white.
   1. ul.nav__breadcrumbs.minimal - This class, placed on the ul.nav__breadcrumbs, adjusts how the breadcrumbs and page title are displayed. Instead of the page title being on a separate line, it is brought inline with the other breadcrumbs and it's size and weight are reduced to align with the other breadcrumbs. NOTE: This requires the h1 tag to be placed in an li element within the ul.nav__breadcrumbs.minimal element. Also, do not use the strong container within the h1 tag as the weight is applied to the h1 tag when the minimal class is absent.
2. .bkg-color__* - This class, placed on the div.content__* element, will add the named color as the background color to that element and change to font color of elements within it the associated font color.
3. .wag-flex-column.wag-flex__align-content-* - These classes, placed on the div.contain element, will allow for the content within this element to be aligned to the specified location within this element. Common examples:
   1. .wag-flex-column.wag-flex__align-content-space-evenly - This combination will space the contents of the element evenly apart INCLUDING spacing before the first element and after the last element. NOTE: This only effects direct descedants of this element. Elements placed within another element within this container will be treated as one object and spaced out accordingly.
   2. .wag-flex-column.wag-flex__align-content-space-between - This combination will space the contents of the element evenly apart WITHOUT adding any space before the first element or after the last element. NOTE: This only effects direct descedants of this element. Elements placed within another element within this container will be treated as one object and spaced out accordingly.

Hero Basics - Examples Split Content 50/50

• Show Code for the Above Example

• Show Code for the Above Example

• Show Code for the Above Example

• Show Code for the Above Example

Hero Basics - Examples Full Width Content

• Show Code for the Above Example

• Show Code for the Above Example

Hero Basics - Examples Other Options

• Show Code for the Above Example