Header
A lightweight, responsive header component used for showcasing hero unit style content.
Example
Here’s an example of the basic components included in a <i-navbar>
that automatically collapses responsively.
Sizes
You're able to use the size
modifier to control the size of your header, using one of the available sizes: sm
, md
, and lg
.
The default size is set to md
.
Medium Inkline Header
This is a medium header paragraph lorem ipsum dolor sit amet.
Fullscreen
You can make headers cover the whole screen width and height (using vw
and vh
) by adding the fullscreen
property. The width and height do not overflow the size of the parent container.
Fullscreen Inkline Header
This is a fullscreen header paragraph lorem ipsum dolor sit amet.
Cover Background
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 Inkline Header
This is a fullscreen header paragraph lorem ipsum dolor sit amet.