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:
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
<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
<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
<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)
<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)
<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
<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
<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>