Header Hero

Component Properties

All Header Types `.hro`

Text / Background Color Theme `.text-bg-[COLOR]`

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:

Minimum Header Height `.min-vh-[VALUE]`

Set a minimum height for the entire header 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 `.justify-content-[POSITION]`

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 `.align-items-[POSITION]`

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 Text Alignment `.text-[POSITION]`

Realign text to components with text alignment classes.

.text-start: Left aligned text inside column.
.text-end: Right aligned text inside column.
.text-center: Center aligned text inside column.

Example

<header class="hro text-bg-[COLOR] min-vh-[VALUE]">
  <div class="container hro-content">
    <div class="row justify-content-[POSITION] align-items-[POSITION]">
      <div class="col text-[POSITION]">
        ...
      </div>
    </div>
  </div>
</header>

Background Image Headers `.hro.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-pos-[POSITION]`

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

.bg-pos-cc: Mobile - Centered image
.bg-pos-lc: Mobile - Left centered image
.bg-pos-rc: Mobile - Right centered image
.bg-pos-xl-cc: Desktop - Centered image
.bg-pos-xl-bc: Desktop - Bottom centered image
.bg-pos-xl-tc: Desktop - Top centered image

Example

<header class="hro hro-img bg-pos-[POSITION] bg-pos-xl-[POSITION]" style="--kb-bgimg-xs: url([IMAGE_PATH]); --kb-bgimg-md: url([IMAGE_PATH]); --kb-bgimg-xl: url([IMAGE_PATH]);">
  <div class="container hro-content">
    ...
  </div>
  <div class="overlay"></div>
</header>

Multiple Image Headers `.hro.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

<header class="hro hro-sld" style="--kb-transition-timing: [TIMING];" data-sld-dur="[DURATION]">
  <div class="container hro-content">
    ...
  </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>
</header>

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

<header class="hro hro-vid">
  <div class="container hro-content">
    ...
  </div>
  <div class="overlay"></div>
  <div class="video-wrapper">
   <iframe class="hro-video-embed" src="..."></iframe>
  </div>
</header>

Basic Header

View in new window

<header class="hro text-bg-light min-vh-90">
  <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

  <!-- [Navigation Area] -->
  <div class="container hro-content">
    <div class="row justify-content-center align-items-center">
      <div class="col-md-12 col-xl-8 text-center">
        <!-- BEGIN: Header Content -->
        <h1>Main Page 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: Header Content -->
      </div>
    </div>
  </div>

</header>

Full Height Header with Scroll Indicator

View in new window

<header class="hro text-bg-dark min-vh-100">
  <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

  <!-- [Navigation Area] -->
  <div class="container hro-content">
    <div class="row justify-content-between align-items-center">
      <div class="col-md-10 col-xl-6">
        <!-- BEGIN: Header Content -->
        <h1>Main Page Title</h1>
        <p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit debitis ab expedita facilis commodi accusantium beatae ad adipisci atque modi.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias dolorem earum voluptate nemo ratione iste voluptatum, soluta fuga doloribus, ea nobis ex suscipit rem eum numquam sunt unde velit quae.</p>
        <a href="#" class="btn btn-outline-light">CTA Button</a>
        <!-- END: Header Content -->
      </div>
      <div class="col-md-10 col-xl-5">
        <!-- BEGIN: Header Content -->
        <img src="../../../../assets/img/fpo/fpo-3-2@md.jpg" class="img-fluid" alt="image">
        <!-- END: Header Content -->
      </div>
    </div>

    <!-- BEGIN: Optional - Scroll down indicator -->
    <div class="scroll-indicator">
      <a href="#main-content">
        <i class="fa-solid fa-computer-mouse"></i>
        <span class="visually-hidden">Scroll to page content</span>
      </a>
    </div>
    <!-- END: Optional - Scroll down indicator -->
  </div>

</header>

Mini Header

View in new window

View in new window for full preview

<header class="hro hro-mini text-bg-light">
  <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

    <nav class="kb-nav navbar kb-navbar-xl fixed-top bg-light" ariaLabel="main" data-bs-theme="light">
      <div class="container-fluid">
        <div class="nav-wrapper">
          <a class="navbar-brand" href="#">
            <img src="../../../../assets/img/konsoka.svg" alt="Konsoka" width="150" height="40">
          </a>
          <ul class="navbar-nav navbar-nav-primary justify-content-start">
            <li class="nav-item has-dropdown" data-content="nav_01_Items" aria-haspopup="true" aria-expanded="false">
              <button class="nav-link" type="button" aria-haspopup="true" aria-expanded="false">Fermentum odio feugiat</button>
            </li>
            <li class="nav-item has-dropdown" data-content="nav_02_Items" aria-haspopup="true" aria-expanded="false">
              <button class="nav-link" type="button" aria-haspopup="true" aria-expanded="false">Nulla facilisi</button>
            </li>
            <li class="nav-item has-dropdown" data-content="nav_03_Items" aria-haspopup="true" aria-expanded="false">
              <button class="nav-link" type="button" aria-haspopup="true" aria-expanded="false">Sem viverra aliquet</button>
            </li>
          </ul>
          <ul class="navbar-nav navbar-nav-secondary justify-content-end">
            <li class="nav-item">
              <a href="#" class="nav-link">Duis ut diam quam</a>
            </li>
            <li class="nav-item">
              <a href="#" class="btn btn-sm btn-outline-primary">Varius morbi</a>
            </li>
          </ul>
        </div>

        <div class="navbar-nav-mobile">
          <a href="#" class="btn btn-sm btn-primary">Mobile CTA</a>
        </div>

        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>

      <div class="dropdown-bar">
        <div class="dropdown-list">
          <div class="dropdown-content">
            <div id="nav_01_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
                <div class="content">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link dropdown-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link dropdown-link" href="#">Item 2</a>
                    </li>
                  </ul>
                </div>
            </div>
            <div id="nav_02_Items" class="nav-dropdown" aria="hidden">
                <div class="content">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link dropdown-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link dropdown-link" href="#">Item 2</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link dropdown-link" href="#">Item 3</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link dropdown-link" href="#">Item 4</a>
                    </li>
                  </ul>
                </div>
            </div>
            <div id="nav_03_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
                <div class="content">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link dropdown-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link dropdown-link" href="#">Item 2</a>
                    </li>
                  </ul>
                </div>
            </div>
          </div>
          <div class="bg-layer bg-light"></div>
        </div>
      </div>

    </nav>

    <!-- Offcanvas Menu: BEGIN -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
      <div class="offcanvas-header">
        <button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">

        <div class="accordion accordion-flush" id="accordionNavItems">
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_01_ItemsMenu" aria-expanded="false" aria-controls="nav_01_ItemsMenu">
                Fermentum odio feugiat
              </button>
            </div>
            <div id="nav_01_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
              <div class="accordion-body">
                <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Item 2</a>
                    </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_02_ItemsMenu" aria-expanded="false" aria-controls="nav_02_ItemsMenu">
                Nulla facilisi
              </button>
            </div>
            <div id="nav_02_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
              <div class="accordion-body">
                <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Item 2</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Item 3</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Item 4</a>
                    </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_03_ItemsMenu" aria-expanded="false" aria-controls="nav_03_ItemsMenu">
                Sem viverra aliquet
              </button>
            </div>
            <div id="nav_03_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
              <div class="accordion-body">
                <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link" href="#">Item 1</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Item 2</a>
                    </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <div class="accordion-header">
              <a href="#" class="btn btn-link d-block text-start">Duis ut diam quam</a>
            </div>
          </div>
          <div class="accordion-item">
            <div class="accordion-header">
              <a href="#" class="btn btn-link d-block text-start">Varius morbi</a>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- Offcanvas Menu: END -->

</header>
<main>
  <div class="container">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima voluptatem ipsam, qui, esse animi nihil nisi autem vero quibusdam asperiores magni! In alias veniam praesentium aut blanditiis architecto amet quaerat.</p>
        <p>Itaque asperiores ut voluptatem, magni deleniti illo aspernatur maxime accusamus praesentium, sed excepturi quia amet rerum? Nemo aut tempore beatae pariatur expedita et cumque, suscipit aperiam eos modi explicabo deleniti?</p>
        <p>Voluptatibus numquam dolorem quidem saepe nulla explicabo, neque accusamus fugit sequi excepturi reprehenderit consectetur, aut consequuntur maiores adipisci eaque laboriosam quo, necessitatibus enim autem ea. Possimus eius nemo suscipit impedit.</p>
        <p>Numquam ducimus laborum, necessitatibus ea ullam ex, iusto sit aliquid nostrum provident veniam expedita aperiam! Dolorem nulla dicta velit, autem soluta corrupti sint neque, officiis vitae corporis ex pariatur atque.</p>
        <p>Vero omnis ipsum quasi! Perspiciatis necessitatibus illo odit nemo incidunt, dolores fuga veniam quod similique aspernatur animi, maxime magni voluptatum minima, sequi qui repellendus aperiam ipsa sunt quas illum ut!</p>
        <p>Sed iusto veniam cum cupiditate unde distinctio nisi quaerat tempora porro optio officiis similique ut, laudantium molestiae quia. Vitae nulla consequatur accusamus inventore saepe enim corrupti, nihil magni ipsa nobis.</p>
        <p>Minus, provident quam. Non cumque animi veniam commodi. Provident praesentium est numquam, molestias necessitatibus dicta dolorum, aspernatur suscipit itaque voluptate pariatur! Porro iste sit illo excepturi doloremque non velit sint?</p>
        <p>Totam necessitatibus soluta expedita voluptate nisi, hic ipsa molestiae. Architecto velit adipisci amet dolorem ipsam, officia praesentium. Atque beatae tempore ipsam aliquid repellat unde voluptates. Doloribus amet facilis nobis quaerat.</p>
        <p>Quia, nam. Velit eos laborum fugit nostrum sed ut. Ullam veritatis, magni exercitationem vero provident velit, ea, voluptas quae quasi ipsa nulla deserunt excepturi nobis nihil ex quas aut nisi.</p>
        <p>Rerum earum beatae cum minima eligendi, error illo sit voluptas et. At, sit. Obcaecati inventore consequatur at reprehenderit blanditiis tempora in? Recusandae cum nemo culpa temporibus odit sequi modi suscipit!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima voluptatem ipsam, qui, esse animi nihil nisi autem vero quibusdam asperiores magni! In alias veniam praesentium aut blanditiis architecto amet quaerat.</p>
        <p>Itaque asperiores ut voluptatem, magni deleniti illo aspernatur maxime accusamus praesentium, sed excepturi quia amet rerum? Nemo aut tempore beatae pariatur expedita et cumque, suscipit aperiam eos modi explicabo deleniti?</p>
        <p>Voluptatibus numquam dolorem quidem saepe nulla explicabo, neque accusamus fugit sequi excepturi reprehenderit consectetur, aut consequuntur maiores adipisci eaque laboriosam quo, necessitatibus enim autem ea. Possimus eius nemo suscipit impedit.</p>
        <p>Numquam ducimus laborum, necessitatibus ea ullam ex, iusto sit aliquid nostrum provident veniam expedita aperiam! Dolorem nulla dicta velit, autem soluta corrupti sint neque, officiis vitae corporis ex pariatur atque.</p>
        <p>Vero omnis ipsum quasi! Perspiciatis necessitatibus illo odit nemo incidunt, dolores fuga veniam quod similique aspernatur animi, maxime magni voluptatum minima, sequi qui repellendus aperiam ipsa sunt quas illum ut!</p>
        <p>Sed iusto veniam cum cupiditate unde distinctio nisi quaerat tempora porro optio officiis similique ut, laudantium molestiae quia. Vitae nulla consequatur accusamus inventore saepe enim corrupti, nihil magni ipsa nobis.</p>
        <p>Minus, provident quam. Non cumque animi veniam commodi. Provident praesentium est numquam, molestias necessitatibus dicta dolorum, aspernatur suscipit itaque voluptate pariatur! Porro iste sit illo excepturi doloremque non velit sint?</p>
        <p>Totam necessitatibus soluta expedita voluptate nisi, hic ipsa molestiae. Architecto velit adipisci amet dolorem ipsam, officia praesentium. Atque beatae tempore ipsam aliquid repellat unde voluptates. Doloribus amet facilis nobis quaerat.</p>
        <p>Quia, nam. Velit eos laborum fugit nostrum sed ut. Ullam veritatis, magni exercitationem vero provident velit, ea, voluptas quae quasi ipsa nulla deserunt excepturi nobis nihil ex quas aut nisi.</p>
        <p>Rerum earum beatae cum minima eligendi, error illo sit voluptas et. At, sit. Obcaecati inventore consequatur at reprehenderit blanditiis tempora in? Recusandae cum nemo culpa temporibus odit sequi modi suscipit!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima voluptatem ipsam, qui, esse animi nihil nisi autem vero quibusdam asperiores magni! In alias veniam praesentium aut blanditiis architecto amet quaerat.</p>
        <p>Itaque asperiores ut voluptatem, magni deleniti illo aspernatur maxime accusamus praesentium, sed excepturi quia amet rerum? Nemo aut tempore beatae pariatur expedita et cumque, suscipit aperiam eos modi explicabo deleniti?</p>
        <p>Voluptatibus numquam dolorem quidem saepe nulla explicabo, neque accusamus fugit sequi excepturi reprehenderit consectetur, aut consequuntur maiores adipisci eaque laboriosam quo, necessitatibus enim autem ea. Possimus eius nemo suscipit impedit.</p>
        <p>Numquam ducimus laborum, necessitatibus ea ullam ex, iusto sit aliquid nostrum provident veniam expedita aperiam! Dolorem nulla dicta velit, autem soluta corrupti sint neque, officiis vitae corporis ex pariatur atque.</p>
        <p>Vero omnis ipsum quasi! Perspiciatis necessitatibus illo odit nemo incidunt, dolores fuga veniam quod similique aspernatur animi, maxime magni voluptatum minima, sequi qui repellendus aperiam ipsa sunt quas illum ut!</p>
        <p>Sed iusto veniam cum cupiditate unde distinctio nisi quaerat tempora porro optio officiis similique ut, laudantium molestiae quia. Vitae nulla consequatur accusamus inventore saepe enim corrupti, nihil magni ipsa nobis.</p>
        <p>Minus, provident quam. Non cumque animi veniam commodi. Provident praesentium est numquam, molestias necessitatibus dicta dolorum, aspernatur suscipit itaque voluptate pariatur! Porro iste sit illo excepturi doloremque non velit sint?</p>
        <p>Totam necessitatibus soluta expedita voluptate nisi, hic ipsa molestiae. Architecto velit adipisci amet dolorem ipsam, officia praesentium. Atque beatae tempore ipsam aliquid repellat unde voluptates. Doloribus amet facilis nobis quaerat.</p>
        <p>Quia, nam. Velit eos laborum fugit nostrum sed ut. Ullam veritatis, magni exercitationem vero provident velit, ea, voluptas quae quasi ipsa nulla deserunt excepturi nobis nihil ex quas aut nisi.</p>
        <p>Rerum earum beatae cum minima eligendi, error illo sit voluptas et. At, sit. Obcaecati inventore consequatur at reprehenderit blanditiis tempora in? Recusandae cum nemo culpa temporibus odit sequi modi suscipit!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima voluptatem ipsam, qui, esse animi nihil nisi autem vero quibusdam asperiores magni! In alias veniam praesentium aut blanditiis architecto amet quaerat.</p>
        <p>Itaque asperiores ut voluptatem, magni deleniti illo aspernatur maxime accusamus praesentium, sed excepturi quia amet rerum? Nemo aut tempore beatae pariatur expedita et cumque, suscipit aperiam eos modi explicabo deleniti?</p>
        <p>Voluptatibus numquam dolorem quidem saepe nulla explicabo, neque accusamus fugit sequi excepturi reprehenderit consectetur, aut consequuntur maiores adipisci eaque laboriosam quo, necessitatibus enim autem ea. Possimus eius nemo suscipit impedit.</p>
        <p>Numquam ducimus laborum, necessitatibus ea ullam ex, iusto sit aliquid nostrum provident veniam expedita aperiam! Dolorem nulla dicta velit, autem soluta corrupti sint neque, officiis vitae corporis ex pariatur atque.</p>
        <p>Vero omnis ipsum quasi! Perspiciatis necessitatibus illo odit nemo incidunt, dolores fuga veniam quod similique aspernatur animi, maxime magni voluptatum minima, sequi qui repellendus aperiam ipsa sunt quas illum ut!</p>
        <p>Sed iusto veniam cum cupiditate unde distinctio nisi quaerat tempora porro optio officiis similique ut, laudantium molestiae quia. Vitae nulla consequatur accusamus inventore saepe enim corrupti, nihil magni ipsa nobis.</p>
        <p>Minus, provident quam. Non cumque animi veniam commodi. Provident praesentium est numquam, molestias necessitatibus dicta dolorum, aspernatur suscipit itaque voluptate pariatur! Porro iste sit illo excepturi doloremque non velit sint?</p>
        <p>Totam necessitatibus soluta expedita voluptate nisi, hic ipsa molestiae. Architecto velit adipisci amet dolorem ipsam, officia praesentium. Atque beatae tempore ipsam aliquid repellat unde voluptates. Doloribus amet facilis nobis quaerat.</p>
        <p>Quia, nam. Velit eos laborum fugit nostrum sed ut. Ullam veritatis, magni exercitationem vero provident velit, ea, voluptas quae quasi ipsa nulla deserunt excepturi nobis nihil ex quas aut nisi.</p>
        <p>Rerum earum beatae cum minima eligendi, error illo sit voluptas et. At, sit. Obcaecati inventore consequatur at reprehenderit blanditiis tempora in? Recusandae cum nemo culpa temporibus odit sequi modi suscipit!</p>
      </div>
    </div>
  </div>
</main>

Background Image Hero Header

View in new window

<header class="hro hro-img text-bg-light min-vh-75 bg-pos-cc bg-pos-xl-bc" 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');">
  <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

  <!-- [Navigation Area] -->
  <div class="container hro-content">
    <div class="row justify-content-center align-items-end">
      <div class="col-md-10 col-xl-8 text-center">
        <!-- BEGIN: Header Content -->
        <h1>Main Page Title</h1>
        <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: Header Content -->
      </div>
    </div>
  </div>

  <div class="overlay"></div>

</header>

Image Slider Style Hero Header

View in new window

<header class="hro hro-sld text-bg-light min-vh-100" style=" --kb-transition-timing: 6s;" data-sld-dur="8000">
  <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

  <!-- [Navigation Area] -->

  <div class="container hro-content">
    <div class="row justify-content-start align-items-center">
      <div class="col-md-8 col-xl-6 text-start">
        <!-- BEGIN: Header Content -->
        <h1>Main Page Title 1</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam quia amet dolor distinctio quo explicabo libero dolore aperiam est. Dolorem hic numquam consectetur quis modi, nemo obcaecati nihil quos tenetur dolorum fugiat eum eius maiores, alias natus. Officiis, mollitia suscipit.</p>
        <a href="#" class="btn btn-outline-primary">CTA Button</a>
        <!-- END: Header 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>

</header>

Streaming Video Hero Header (YouTube)

View in new window

<header class="hro hro-img hro-vid text-bg-dark min-vh-90 bg-pos-cc bg-pos-xl-cc" 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');">
  <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

  <!-- [Navigation Area] -->
  <div class="container hro-content">
    <div class="row justify-content-start align-items-end">
      <div class="col-md-10 col-xl-6 text-start">
        <!-- BEGIN: Header 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: Header 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>

</header>

Streaming Video Hero Header (Vimeo)

View in new window

View in new window for full preview

<header class="hro hro-img hro-vid text-bg-dark min-vh-90 bg-pos-cc bg-pos-xl-cc" 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');">
  <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

  <!-- [Navigation Area] -->
  <div class="container hro-content">
    <div class="row justify-content-end align-items-center">
      <div class="col-md-8 col-xl-5 text-start">
        <!-- BEGIN: Header 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: Header 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>

</header>

Header Hero

Component Properties

All Header Types .hro

Text / Background Color Theme .text-bg-[COLOR]

Minimum Header Height .min-vh-[VALUE]

Row Justification .justify-content-[POSITION]

Row Alignment .align-items-[POSITION]

Column Text Alignment .text-[POSITION]

Example

Background Image Headers .hro.hro-img

Background Images

Background Image Position .bg-pos-[POSITION]

Example

Multiple Image Headers .hro.hro-sld

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

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

Image Trasition Effects .kb-effect[NUMBER]

Example

Streaming Background Video Headers .hro.hro-vid

Example

Basic Header

Full Height Header with Scroll Indicator

Mini Header

Background Image Hero Header

Image Slider Style Hero Header

Streaming Video Hero Header (YouTube)

Streaming Video Hero Header (Vimeo)

All Header Types `.hro`

Text / Background Color Theme `.text-bg-[COLOR]`

Minimum Header Height `.min-vh-[VALUE]`

Row Justification `.justify-content-[POSITION]`

Row Alignment `.align-items-[POSITION]`

Column Text Alignment `.text-[POSITION]`

Background Image Headers `.hro.hro-img`

Background Image Position `.bg-pos-[POSITION]`

Multiple Image Headers `.hro.hro-sld`

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

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

Image Trasition Effects `.kb-effect[NUMBER]`

Streaming Background Video Headers `.hro.hro-vid`