Header - Inkline

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.

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.

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

Component API

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.

Sass Variables

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.