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
|cover||Sets the background image as cover, resizing itself responsively to fit the header size.|| || |
|fluid||Sets the || || |
|fullscreen||Sets the Header component to cover the whole screen width and height.|| || |
|size||Sets the size of the header component.|| || |