A lightweight, responsive header component used for showcasing hero unit style content.
Here’s an example of the basic components included in a
<i-navbar> that automatically collapses responsively.
You're able to use the
size modifier to control the size of your header, using one of the available sizes:
The default size is set to
You can make headers cover the whole screen width and height (using
vh) by adding the
fullscreen property. The width and height do not overflow the size of the parent container.
The goal of cover background images on a website is to cover the entire browser window at all times. Simply set a background for the header
Here you can find a list of the various customization options you can use for the header component as props, as well as available slots.
Here you can find a list of the Sass variables you can use for the header components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.