Headers
Main heading area for a webpage
Image Header Example
Props
bgImageSm: [string] - Background image source for small viewports
bgImageLg: [string] - Background image source for large viewports
minHeight: [number] - Optional: Add minimum height for section. Based on viewport height. Values: 50, 65, 75, 90, 100
darkTheme: [boolean] - Optional: Applies dark background with white text to content area
<header class="robern-bg-header text-bg-light" style="--rbn-bgimg-sm: url('../img/fpo/fpo-image-3-4.jpg'); --rbn-bgimg-lg: url('../img/fpo/fpo-image-16-9.jpg');">
<a class="visually-hidden-focusable text-white-50" href="#main-content">Skip to main content</a>
<!-- BEGIN: Navigation Content -->
<!-- [Navigation Area] -->
<!-- END: Navigation Content -->
<div class="container-xxl d-flex flex-column min-vh-75">
<div class="row justify-content-center flex-fill">
<div class="col-xl-10 col-xxl-8 d-flex masthead-content">
<div class="d-flex flex-fill flex-column justify-content-end align-items-center">
<!-- BEGIN: Section Content -->
<h1>
Main page heading
<span class="subhead">Supporting subheader</span>
</h1>
<a class="btn btn-primary btn-header">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
<div class="row">
<div class="col">
<!-- BEGIN: breadcrumb Content -->
<!-- END: breadcrumb Content -->
</div>
</div>
</div>
<!-- BEGIN: Page Navigation Content -->
<!-- END: Page Navigation Content -->
<div class="masthead-overlay"></div>
</header>
Video Header Example
Props
videoSrc: [string] - Image source for background image
videoPoster: [string] - Image to show as poster while video loads. Also shows for mobile viewport instead of video
overlayColor: [rgba()] - Color and alpha for video overlay. Used to make header text pop against video.
minHeight: [number] - Optional: Add minimum height for section. Based on viewport height. Values: 50, 65, 75, 90, 100
darkTheme: [boolean] - Optional: Applies dark background with white text to content area
<header class="bg-video-header text-bg-dark">
<a class="visually-hidden-focusable text-white-50" href="#main-content">Skip to main content</a>
<!-- BEGIN: Navigation Content -->
<!-- [Navigation Area] -->
<!-- END: Navigation Content -->
<div class="container-xxl">
<div class="row min-vh-90">
<div class="col d-flex masthead-content">
<div class="d-flex flex-fill flex-column justify-content-center align-items-center">
<!-- BEGIN: Section Content -->
<h1>Understated Luxury</h1>
<p>The bathroom is our favorite room. It is our private space. It is our sanctuary.</p>
<a class="btn btn-primary">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
</div>
<!-- BEGIN: Page Navigation Content -->
<!-- END: Page Navigation Content -->
<div class="masthead-overlay"></div>
<video src="../../../../assets/video/Adobestock 473212176 Video Hd Preview.mp4" class="masthead-video" autoplay loop muted></video>
<img class="masthead-poster" src="../../../../assets/img/fpo/fpo-image-3-4.jpg" alt="">
</header>
Header with page navigation
<header class="robern-bg-header text-bg-light" style="--rbn-bgimg-sm: url('../img/fpo/fpo-image-4-3.jpg'); --rbn-bgimg-lg: url('../img/fpo/fpo-image-16-9.jpg');">
<a class="visually-hidden-focusable text-white-50" href="#main-content">Skip to main content</a>
<!-- BEGIN: Navigation Content -->
<!-- END: Navigation Content -->
<div class="container-xxl d-flex flex-column min-vh-90">
<div class="row justify-content-center flex-fill">
<div class="col-xl-10 col-xxl-8 d-flex masthead-content">
<div class="d-flex flex-fill flex-column justify-content-end align-items-center">
<!-- BEGIN: Section Content -->
<h1>Page heading</h1>
<p>Page heading supporting text.</p>
<!-- END: Section Content -->
</div>
</div>
</div>
<div class="row">
<div class="col">
<!-- BEGIN: breadcrumb Content -->
<!-- END: breadcrumb Content -->
</div>
</div>
</div>
<!-- BEGIN: Page Navigation Content -->
<div class=" text-bg-dark rbn-scroll-nav">
<div class="container-xxl">
<div class="row">
<div class="col">
<nav ariaLabel="Page">
<a href="#" class="btn btn-outline-dark pg-scroll">Page Link 1</a>
<a href="#" class="btn btn-outline-dark pg-scroll">Page Link 2</a>
<a href="#" class="btn btn-outline-dark pg-scroll">Page Link 3</a>
<a href="#" class="btn btn-outline-dark pg-scroll">Page Link 4</a>
</nav>
</div>
</div>
</div>
</div>
<!-- END: Page Navigation Content -->
<div class="masthead-overlay"></div>
</header>
Full Header Example
<header class="robern-bg-header text-bg-dark" style="--rbn-bgimg-sm: url('../img/fpo/fpo-image-4-3-dark.jpg'); --rbn-bgimg-lg: url('../img/fpo/fpo-image-16-9-dark.jpg');">
<a class="visually-hidden-focusable text-white-50" href="#main-content">Skip to main content</a>
<!-- BEGIN: Navigation Content -->
<nav class="rbn-main-nav" ariaLabel="main">
<div class="nav-blur">
<div class="container-xxl">
<a class="visually-hidden-focusable text-white-50" href="#main-content">Skip to main content</a>
<div class="rbn-top-nav d-flex align-items-center">
<a class="rbn-brand" href="#">
<svg class="nav-logo" xmlns="http://www.w3.org/2000/svg" width="150px" height="40px" viewBox="0 0 150 40" alt="Robern">
<path d="M28.7,9.9c-8.3,0-15,6.7-15,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C43.7,16.6,37,9.9,28.7,9.9 M28.7,34.3c-5.2,0-9.4-4.2-9.4-9.4c0-5.2,4.2-9.4,9.4-9.4c5.2,0,9.4,4.2,9.4,9.4C38.2,30.1,33.9,34.3,28.7,34.3 M60.8,9.9c-3.6,0-6.9,1.3-9.5,3.4V0h-5.5v24.8c0,0,0,0.1,0,0.1c0,8.3,6.7,15,15,15s15-6.7,15-15C75.8,16.6,69.1,9.9,60.8,9.9z M60.9,34.3c-5.2,0-9.4-4.2-9.4-9.4c0-5.2,4.2-9.4,9.4-9.4s9.4,4.2,9.4,9.4C70.3,30.1,66.1,34.3,60.9,34.3z M13.5,16c-0.7,0-1.8,0-1.8,0.1c-3.6,0.1-6.2,3-6.2,6.8v16.9H0V22.8c0-7,4.8-11.9,11.7-11.9c0.6,0,1.2,0,1.8,0.1L13.5,16z M119.1,16c-0.7,0-1.8,0-1.8,0.1c-3.6,0.1-6.2,3-6.2,6.8v16.9h-5.4V22.8c0-7,4.8-11.9,11.7-11.9c0.6,0,1.2,0,1.8,0.1L119.1,16z M132,10.8c6.9,0,11.7,4.9,11.7,11.9v16.9h-5.4V22.7c0-3.8-2.7-6.7-6.2-6.7c-3.5,0-6.2,3-6.2,6.7v17h-5.4v-17C120.3,15.7,125.1,10.8,132,10.8 M99.5,31.6c-0.2,0.2-0.3,0.3-0.5,0.5c-0.1,0-0.1,0.1-0.2,0.1c-0.2,0.1-0.3,0.2-0.5,0.4c-0.1,0-0.1,0.1-0.2,0.1c-0.2,0.1-0.4,0.3-0.6,0.4c0,0,0,0,0,0c-0.1,0-0.1,0.1-0.2,0.1c-0.2,0.1-0.3,0.2-0.5,0.3c-0.1,0-0.2,0.1-0.2,0.1c-0.2,0.1-0.3,0.1-0.5,0.2c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0.1-0.3,0.1-0.5,0.2c-0.1,0-0.2,0-0.2,0.1c-0.2,0.1-0.5,0.1-0.7,0.2c0,0,0,0,0,0c-0.2,0-0.5,0.1-0.7,0.1c-0.1,0-0.2,0-0.2,0c-0.2,0-0.3,0-0.5,0c-0.1,0-0.2,0-0.3,0c-0.2,0-0.3,0-0.5,0c-0.1,0-0.2,0-0.3,0c-0.2,0-0.4,0-0.6-0.1c-0.1,0-0.1,0-0.2,0c-0.2,0-0.5-0.1-0.7-0.2c-0.1,0-0.1,0-0.2-0.1c-0.2-0.1-0.4-0.1-0.5-0.2c-0.1,0-0.2-0.1-0.2-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1,0-0.2-0.1-0.2-0.1c-0.2-0.1-0.3-0.2-0.5-0.2c-0.1,0-0.1-0.1-0.2-0.1c-0.2-0.1-0.4-0.3-0.6-0.4l11.9-11.9v0l5.1-5.1c0,0,0,0,0,0c-0.3-0.4-0.7-0.8-1.1-1.2c-5.9-5.9-15.4-5.9-21.2,0c-5.9,5.9-5.9,15.4,0,21.2c4.2,4.2,10.1,5.4,15.4,3.6c0.6-0.2,1.3-0.5,1.9-0.8V31.6z M86.2,18.2c2.9-2.9,7.3-3.5,10.8-1.8L84.4,29C82.7,25.5,83.3,21.1,86.2,18.2 M145.8,37.7c0-1.1,0.8-1.9,1.9-1.9c1,0,1.8,0.8,1.8,1.9c0,1.1-0.8,1.9-1.8,1.9C146.6,39.6,145.8,38.8,145.8,37.7 M147.7,40c1.2,0,2.3-1,2.3-2.3c0-1.3-1.1-2.3-2.3-2.3c-1.3,0-2.3,1-2.3,2.3C145.4,39,146.4,40,147.7,40 M147.2,37.9h0.5l0.7,1.1h0.4l-0.7-1.2c0.4,0,0.7-0.3,0.7-0.7c0-0.5-0.3-0.7-0.9-0.7h-1V39h0.4V37.9z M147.2,37.6v-0.8h0.5c0.3,0,0.6,0.1,0.6,0.4c0,0.4-0.3,0.4-0.6,0.4H147.2z"/>
</svg>
</a>
<ul class="rbn-nav d-none d-xl-flex flex-fill">
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Our Story</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Inspiration</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Resources</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Hospitality & Commercial</a>
</li>
<li class="nav-item ms-auto nav-border-x">
<a href="#" class="nav-link">Contact Us</a>
</li>
<!-- Search START-->
<li class="nav-item">
<a href="#" class="nav-link px-4" aria-label="Search Robern site">
<span class="mglass" aria-hidden="true">⚲</span>
</a>
</li>
<!-- Search END-->
</ul>
<button class="navbar-toggler d-xl-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<svg class="rbn-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="26px" height="24px" viewBox="0 0 26 24">
<path d="M14,24H0v-2h14V24z M26,11H0v2h26V11z M21,0H0v2h21V0z"/>
</svg>
<div class="visually-hidden">Toggle Main Menu</div>
</button>
</div>
</div>
</div>
<div class="dropdown-bar">
<ul class="dropdown-list">
</ul>
</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 rbn-nav-accordion" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn px-3 py-3 fs-6 text-capitalize d-block text-start">Products</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn px-3 py-3 fs-6 text-capitalize d-block text-start">Our Story</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn px-3 py-3 fs-6 text-capitalize d-block text-start">Inspiration</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn px-3 py-3 fs-6 text-capitalize d-block text-start">Resources</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn px-3 py-3 fs-6 text-capitalize d-block text-start">Hospitality & Commercial</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn px-3 py-3 fs-6 text-capitalize d-block text-start">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
<!-- END: Navigation Content -->
<div class="container-xxl d-flex flex-column min-vh-90">
<div class="row justify-content-center flex-fill">
<div class="col-xl-10 col-xxl-8 d-flex masthead-content">
<div class="d-flex flex-fill flex-column justify-content-end align-items-center">
<!-- BEGIN: Section Content -->
<h1>Page heading</h1>
<p>Page heading supporting text.</p>
<!-- END: Section Content -->
</div>
</div>
</div>
<div class="row">
<div class="col">
<!-- BEGIN: breadcrumb Content -->
<!-- END: breadcrumb Content -->
</div>
</div>
</div>
<!-- BEGIN: Page Navigation Content -->
<div class=" text-bg-light rbn-scroll-nav">
<div class="container-xxl">
<div class="row">
<div class="col">
<nav ariaLabel="Page">
<a href="#" class="btn btn-outline-light pg-scroll">Page Link 1</a>
<a href="#" class="btn btn-outline-light pg-scroll">Page Link 2</a>
<a href="#" class="btn btn-outline-light pg-scroll">Page Link 3</a>
<a href="#" class="btn btn-outline-light pg-scroll">Page Link 4</a>
</nav>
</div>
</div>
</div>
</div>
<!-- END: Page Navigation Content -->
<div class="masthead-overlay"></div>
</header>