Stacked Hero

Main heading area for a page template

Component Properties


All Hero Types .shr

Text / Background Color Theme [COLOR_THEME]

Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:

View in new window for full preview

Section Modifier [MODIFIER]

Optionally add an overall modifier class to the component.

Section Vertical Spacing [SPACING]

Optional: Adds top and bottom padding to section.

none
No spacing applied to element
.sec-spacing
Adds top and bottom spacing to section
.sec-spacing-sm
Adds a small amount top and bottom spacing to section
.sec-spacing-lg
Adds a large amount top and bottom spacing to section

Container Modifier [CONTAINER]

Use .container-fluid for a full width container, spanning the entire width of the viewport

.container
Standard width section contrainer. Container width snaps to width at breakpoints.
.container-xxl
Standard width section contrainer. Container has fluid until it reaches it's maximum width
.container-fluid
Full width section contrainer. Container runs from edge to egde of the viewport

Minimum Section Height [MIN_HEIGHT]

Set a minimum height for the entire section based on the height of the viewport.

.min-vh-40
40% of the viewport height
.min-vh-60
60% of the viewport height
.min-vh-75
75% of the viewport height
.min-vh-90
90% of the viewport height
.min-vh-100
100% of the viewport height

Row Justification [ROW_JUSTIFY]

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main x-axis.

.justify-content-start
Pack columns from the left
.justify-content-end
Pack columns from the right
.justify-content-center
Pack columns around the center.
.justify-content-between
Distribute columns evenly. The first item is flush with the start, the last is flush with the end.
.justify-content-around
Distribute columns evenly. Start and end gaps are half the size of the space between each item.
.justify-content-evenly
Distribute columns evenly. Start, in-between, and end gaps have equal sizes.

Row Alignment [ROW_ALIGN]

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross y-axis.

.align-items-start
Columns are packed flush to each other toward the start edge of the row in the appropriate axis.
.align-items-end
Columns are packed flush to each other toward the end edge of the row in the appropriate axis.
.align-items-center
Columns are vertically aligned to the center of the row.
.align-items-stretch
All Columns are stretched vertically to match the tallest column in the row.

Column widths [COL_WIDTH_MD] [COL_WIDTH_XL]

Set the width of the content column for desktop vieports.

.col-md-[1-12]
[COL_WIDTH_MD] Sets column width at the $md breakpoint
.col-xl-[1-12]
[COL_WIDTH_XL] Sets column width at the $xl breakpoint
.col-break
Force next columns to break to new line through all breakpoints

Grid Spacing [GRID_GAP_X] [GRID_GAP_Y]

Gutters are the padding between your columns, used to responsively space and align content in the grid system.

none
Grid follows default spacing.
.gx-[0-5]
[GRID_GAP_X] Provides horizontal gap between columns.
.gy-[0-5]
[GRID_GAP_Y] Provides vertical gap between columns.

Column Modifier [COL_MODIFIER]

Optionally add a modifier class to the column.

Example
      
        <section class="shr [COLOR_THEME] [MIN_HEIGHT] [SPACING] [MODIFIER]">
          <div class="hro-content [CONTAINER]">
            <div class="row [ROW_JUSTIFY] [ROW_ALIGN] [GRID_GAP_X] [GRID_GAP_Y]">
              <div class="[COL_WIDTH_MD] [COL_WIDTH_XL] [COL_MODIFIER]">
                ...
              </div>
            </div>
          </div>
        </section>

Background Image Headers .shr.hro-img

Background Images

This header supports image for three different breakpoints. The image displayed in the header is controled by a css variable on the .hro-img class.

--kb-bgimg-xs
Mobile image, displays on all small viewports
--kb-bgimg-md
Medium image, replaces small image at the medium $md breakpoint
--kb-bgimg-xl
Large image, replaces medium image at the extra large $xl breakpoint

Background Image Position [BG_POSITION] [BG_POSITION_XL]

Controls the anchor postion of the background image within the hero component. Can me changed for mobile or desktop viewport widths.

.bg-pos-cc
[BG_POSITION] Mobile - Centered image
.bg-pos-lc
[BG_POSITION] Mobile - Left centered image
.bg-pos-rc
[BG_POSITION] Mobile - Right centered image
.bg-pos-xl-cc
[BG_POSITION_XL] Desktop - Centered image
.bg-pos-xl-bc
[BG_POSITION_XL] Desktop - Bottom centered image
.bg-pos-xl-tc
[BG_POSITION_XL] Desktop - Top centered image
Example
      
        <section class="shr hro-img [COLOR_THEME] [MIN_HEIGHT] [SPACING] [MODIFIER] [BG_POSITION] [BG_POSITION_XL]" style="--kb-bgimg-xs: url([IMAGE_PATH]); --kb-bgimg-md: url([IMAGE_PATH]); --kb-bgimg-xl: url([IMAGE_PATH]);">
          <div class="hro-content [CONTAINER]">
            ...
          </div>
          <div class="overlay"></div>
        </section>

Multiple Image Headers .shr.hro-sld

Image Duration data-sld-dur="[DURATION]"

Optional The data attribute controls the length of duration for each image to show. Set in milliseconds. Defaults to 5000.

Image Trasition Duration --kb-transition-timing: [TIMING];

Optional CSS variable that controls the trasition time between each image. Uses css time value. Defaults to 5s. Also adjustable in the SASS variable file.

Image Trasition Effects .kb-effect[NUMBER]

There are four adjustable transitions available. These classes should be placed on the image contained in the .kbuns-wrapper element. Each type can be adjusted in the SASS variable file.

.kb-effect1
Fade only
.kb-effect2
Twist right and scale
.kb-effect3
Twist left and scale
.kb-effect4
Slide right and scale
.kb-effect5
Slide left and scale
.kb-effect6
Scale
.kb-effect7
Scale large
Example
      
        <section class="shr hro-sld [COLOR_THEME] [MIN_HEIGHT] [SPACING] [MODIFIER]" style="--kb-transition-timing: [TIMING];" data-sld-dur="[DURATION]">
          <div class="hro-content [CONTAINER]">
            ...
          </div>
          <div class="overlay"></div>
          <div class="sld-wrapper">
           <img srcset="..." sizes="..." alt="..." class="kb-effect[NUMBER]">
           <img srcset="..." sizes="..." alt="..." class="kb-effect[NUMBER]">
          </div>
        </section>

Streaming Background Video Headers .hro.hro-vid

This variant supports a streaming video from either YouTube or Vimeo streaming platforms. Videos will autoplay and are forced to be muted. Use the background image header's properties to supply a video poster to show before the video begins playing.

Example
      
        <section class="shr hro-vid [COLOR_THEME] [MIN_HEIGHT] [SPACING] [MODIFIER]">
          <div class="hro-content [CONTAINER]">
            ...
          </div>
          <div class="overlay"></div>
          <div class="video-wrapper">
           <iframe class="hro-video-embed" src="..."></iframe>
          </div>
        </section>

Section Hero

View in new window
View in new window for full preview
      
        <section class="shr text-bg-light min-vh-85 sec-spacing">
    <div class="hro-content container">
      <div class="row gy-3 gx-3 align-items-center">
        <div class="col-md-5 col-xl-4">
          <!-- BEGIN: Hero Content -->
            <img
              srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
                      ../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
              alt="Image description"
              class="img-ar1-1"
            >
          <!-- END: Hero Content -->
        </div>
        <div class="col-md-7 col-xl-8">
          <!-- BEGIN: Hero Content -->
            <h2>Section Title</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit fugiat vel alias dignissimos, consequatur numquam necessitatibus a quis commodi modi tenetur, nam repellendus laboriosam quas optio nihil aliquam dolor veritatis dolore voluptatibus officia quidem ipsum expedita saepe? Laudantium illo aspernatur odio eum consequatur, corporis animi id totam nulla dolorum similique?</p>
            <a href="#" class="btn btn-outline-primary">CTA Button</a>
          <!-- END: Hero Content -->
        </div>
      </div>
    </div>
  
  </section>

Background Image Hero Header

View in new window
View in new window for full preview
      
        <section class="shr hro-img text-bg-light min-vh-85 bg-pos-cc bg-pos-xl-bc sec-spacing-lg" style="--kb-bgimg-xs: url('../img/fpo/fpo-3-2@xs-super.jpg'); --kb-bgimg-md: url('../img/fpo/fpo-3-2@md-super.jpg'); --kb-bgimg-xl: url('../img/fpo/fpo-3-2@xl-super.jpg');">
    <div class="hro-content container">
      <div class="row gy-3 gx-3 justify-content-between align-items-center">
        <div class="col-md-6 col-xl-4">
          <!-- BEGIN: Hero Content -->
          <h2>Section Title</h2>
          <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet perspiciatis voluptatum incidunt deserunt libero. Distinctio tempora quas sint fugit illo ducimus, provident ipsa vel, quia voluptate dolores ipsam veritatis quos sed expedita. Cum, eaque! Reprehenderit ut alias omnis perferendis ipsa veniam consequatur voluptatum cumque possimus.</p>
          <a href="#" class="btn btn-primary">CTA Button</a>
          <!-- END: Hero Content -->
        </div>
        <div class="col-md-6 col-xl-6">
          <!-- BEGIN: Hero Content -->
          <h4>Woluptatum incidunt deserunt</h4>
          <ul class="list-links">
            <li><a href="#">Molestias doloribus temporibus voluptatibus.</a></li>
            <li><a href="#">Temporibus, consequuntur. Fugiat, aliquam!</a></li>
            <li><a href="#">Accusamus itaque sit culpa.</a></li>
            <li><a href="#">Temporibus dicta maiores dolorem.</a></li>
            <li><a href="#">Reiciendis animi voluptate deserunt.</a></li>
          </ul>
          <!-- END: Hero Content -->
        </div>
      </div>
    </div>
  
    <div class="overlay"></div>
  
  </section>

Image Slider Style Hero Header

View in new window
View in new window for full preview
      
        <section class="shr hro-sld text-bg-light min-vh-85 sec-spacing-lg" style=" --kb-transition-timing: 6s;" data-sld-dur="8000">
    <div class="hro-content container">
      <div class="row">
        <div class="col-md-8 col-xl-6">
          <!-- BEGIN: Hero Content -->
          <h2>Section Title</h2>
          <p>Veritatis, perferendis atque delectus unde nesciunt ducimus reiciendis itaque in nobis vel recusandae! Vitae harum sunt cum mollitia cupiditate? Quisquam, odio a!</p>
          <p>Sit enim asperiores repellat sint non suscipit natus quaerat deleniti tempore placeat sed dolorem saepe delectus maiores ipsa, praesentium animi nihil ratione!</p>
  
          <h3>Praesentium Animi Nihil</h3>
          <p>Ipsum ullam voluptas voluptate ab totam culpa unde itaque, rem modi dolorem nisi recusandae doloribus quod magni! Blanditiis animi placeat autem totam, ipsam veniam repudiandae accusamus recusandae corrupti quia sapiente.</p>
          <p>Minima inventore cumque, eos dolore enim eius commodi iure voluptas pariatur beatae exercitationem vero ullam nihil aut architecto. Sed numquam atque illum qui architecto sit voluptatum quas harum dolor neque.</p>
          <p>Hic quod iste velit a delectus! Laudantium necessitatibus magnam suscipit deleniti facere maxime, earum dolore repudiandae, quasi aliquam, tenetur provident distinctio harum fugit! Quisquam, rerum laudantium itaque fugiat sed doloribus.</p>
          <p>Autem recusandae nobis illo eveniet explicabo aliquid, iste, omnis natus error labore praesentium eum porro accusamus quisquam ex. Atque vero libero velit ea! Quis sed quas nesciunt aliquam eligendi fugit?</p>
          <!-- END: Hero Content -->
        </div>
      </div>
    </div>
  
    <div class="overlay"></div>
  
    <div class="sld-wrapper">
        <img
          srcset="../../../../assets/img//fpo/fpo-3-2@xl.jpg 1440w, ../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
          sizes="(min-width: 1200px) 1440px, (min-width: 768px) 960px, calc(100vw - 1.5rem)"
          src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
          alt=""
          class="kb-effect1">
        <img
          srcset="../../../../assets/img//fpo/fpo-3-2@xl-super.jpg 1440w, ../../../../assets/img//fpo/fpo-3-2@md-super.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs-super.jpg 480w"
          sizes="(min-width: 1200px) 1440px, (min-width: 768px) 960px, calc(100vw - 1.5rem)"
          src="../../../../assets/img//fpo/fpo-3-2@md-super.jpg"
          alt=""
          class="kb-effect2">
        <img
          srcset="../../../../assets/img//fpo/fpo-3-2@xl.jpg 1440w, ../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
          sizes="(min-width: 1200px) 1440px, (min-width: 768px) 960px, calc(100vw - 1.5rem)"
          src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
          alt=""
          class="kb-effect3">
        <img
          srcset="../../../../assets/img//fpo/fpo-3-2@xl-super.jpg 1440w, ../../../../assets/img//fpo/fpo-3-2@md-super.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs-super.jpg 480w"
          sizes="(min-width: 1200px) 1440px, (min-width: 768px) 960px, calc(100vw - 1.5rem)"
          src="../../../../assets/img//fpo/fpo-3-2@md-super.jpg"
          alt=""
          class="kb-effect4">
        <img
          srcset="../../../../assets/img//fpo/fpo-3-2@xl-super.jpg 1440w, ../../../../assets/img//fpo/fpo-3-2@md-super.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs-super.jpg 480w"
          sizes="(min-width: 1200px) 1440px, (min-width: 768px) 960px, calc(100vw - 1.5rem)"
          src="../../../../assets/img//fpo/fpo-3-2@md-super.jpg"
          alt=""
          class="kb-effect5">
        <img
          srcset="../../../../assets/img//fpo/fpo-3-2@xl-super.jpg 1440w, ../../../../assets/img//fpo/fpo-3-2@md-super.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs-super.jpg 480w"
          sizes="(min-width: 1200px) 1440px, (min-width: 768px) 960px, calc(100vw - 1.5rem)"
          src="../../../../assets/img//fpo/fpo-3-2@md-super.jpg"
          alt=""
          class="kb-effect6">
        <img
          srcset="../../../../assets/img//fpo/fpo-3-2@xl-super.jpg 1440w, ../../../../assets/img//fpo/fpo-3-2@md-super.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs-super.jpg 480w"
          sizes="(min-width: 1200px) 1440px, (min-width: 768px) 960px, calc(100vw - 1.5rem)"
          src="../../../../assets/img//fpo/fpo-3-2@md-super.jpg"
          alt=""
          class="kb-effect7">
    </div>
  
  </section>

Streaming Video Hero Header (YouTube)

View in new window
View in new window for full preview
      
        <section class="shr hro-img hro-vid text-bg-dark min-vh-85 bg-pos-cc bg-pos-xl-cc sec-spacing" style="--kb-bgimg-xs: url('../img/fpo/fpo-3-2@xs.jpg'); --kb-bgimg-md: url('../img/fpo/fpo-3-2@md.jpg'); --kb-bgimg-xl: url('../img/fpo/fpo-3-2@xl.jpg');">
    <div class="hro-content container">
      <div class="row justify-content-start align-items-end">
        <div class="col-md-10 col-xl-6 text-start">
          <!-- BEGIN: Hero Content -->
          <h1>Main Page Title</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, a, quidem porro quod suscipit impedit maxime reiciendis sequi dignissimos minus numquam ullam hic labore temporibus molestiae ratione adipisci, nostrum saepe cum dolorem similique quo corporis!</p>
          <a href="#" class="btn btn-outline-light">CTA Button</a>
          <!-- END: Hero Content -->
        </div>
      </div>
    </div>
  
    <div class="overlay"></div>
  
    <div class="video-wrapper">
        <iframe
          id="ytplayer"
          class="hro-video-embed"
          type="text/html"
          width="640"
          height="360"
          src="https://www.youtube.com/embed/tGc9n1lc21Q?autoplay=1&mute=1&controls=0&loop=1&disablekb=1&fs=0&modestbranding=1&playsinline=1&color=white&iv_load_policy=3&playlist=tGc9n1lc21Q"
          frameborder="0"
          allowfullscreen>
        </iframe>
    </div>
  
  </section>

Streaming Video Hero Header (Vimeo)

View in new window
View in new window for full preview
      
        <section class="shr hro-img hro-vid text-bg-dark min-vh-85 bg-pos-cc bg-pos-xl-cc sec-spacing" style="--kb-bgimg-xs: url('../img/fpo/fpo-3-2@xs.jpg'); --kb-bgimg-md: url('../img/fpo/fpo-3-2@md.jpg'); --kb-bgimg-xl: url('../img/fpo/fpo-3-2@xl.jpg');">
    <div class="hro-content container">
      <div class="row justify-content-end align-items-center">
        <div class="col-md-8 col-xl-5 text-start">
          <!-- BEGIN: Hero Content -->
          <h1>Main Page Title</h1>
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime amet debitis animi voluptatibus dignissimos, eligendi facere voluptates.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum dolorem officia repellendus sequi eligendi consequuntur facilis molestias quidem obcaecati quasi expedita rem dolorum.</p>
          <a href="#" class="btn btn-outline-light">CTA Button</a>
          <!-- END: Hero Content -->
        </div>
      </div>
    </div>
  
    <div class="overlay"></div>
  
    <div class="video-wrapper">
        <iframe
          id="vimplayer"
          class="hro-video-embed"
          type="text/html"
          width="640"
          height="360"
          src="https://player.vimeo.com/video/326252973?background=true&autopause=false"
          frameborder="0"
          allow="autoplay; fullscreen; picture-in-picture"
          allowfullscreen>
        </iframe>
    </div>
  
  </section>

Large CTA Banner

View in new window
View in new window for full preview
      
        <section class="shr hro-img text-bg-light min-vh-75 bg-pos-cc bg-pos-xl-cc sec-spacing-lg" style="--kb-bgimg-xs: url('../img/fpo/fpo-3-2@xs-super.jpg'); --kb-bgimg-md: url('../img/fpo/fpo-3-2@md-super.jpg'); --kb-bgimg-xl: url('../img/fpo/fpo-3-2@xl-super.jpg');">
    <div class="hro-content container">
      <div class="row justify-content-center align-items-center">
        <div class="col-md-9 col-xl-7 col-banner-frame text-center">
          <!-- BEGIN: Hero Content -->
        <h2>Explore the Area</h2>
        <p>Welcome to historic Cape Elizabeth. Rich with culture, history, and blissful activities.</p>
          <!-- END: Hero Content -->
        </div>
      </div>
    </div>
  
    <div class="overlay"></div>
  
  </section>

Large CTA Service Banner

View in new window
View in new window for full preview
      
        <section class="shr hro-img text-bg-light min-vh-75 bg-pos-cc bg-pos-xl-cc sec-spacing-lg section-wave-end" style="--kb-bgimg-xs: url('../img/fpo/fpo-3-2@xs-super.jpg'); --kb-bgimg-md: url('../img/fpo/fpo-3-2@md-super.jpg'); --kb-bgimg-xl: url('../img/fpo/fpo-3-2@xl-super.jpg');">
    <div class="hro-content container">
      <div class="row align-items-end">
        <div class="col-md-8 col-xl-5">
          <!-- BEGIN: Hero Content -->
        <h2>Spa By The Sea</h2>
        <p>SPA at Inn by the Sea is thrilled to welcome you. Luxuriate, naturally with treatments and therapies offering a little something for everyone. We have an array of spa packages for you to choose from!</p>
        <a href="#" class="btn btn-primary">CTA Button</a>
          <!-- END: Hero Content -->
        </div>
      </div>
    </div>
  
    <div class="overlay"></div>
  
  </section>