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.

Inkline Header

This is a header paragraph lorem ipsum dolor sit amet.

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.

Small Inkline Header

This is a small header paragraph lorem ipsum dolor sit amet.

Medium Inkline Header

This is a medium header paragraph lorem ipsum dolor sit amet.

Large Inkline Header

This is a large 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.

API

Property	Description	Type	Accepted	Default
cover	Sets the background image as cover, resizing itself responsively to fit the header size.	`Boolean`	`true`, `false`	`true`
fluid	Sets the `IContainer` wrapping the headers's content as fluid.	`Boolean`	`true`, `false`	`false`
fullscreen	Sets the Header component to cover the whole screen width and height.	`Boolean`	`true`, `false`	`false`
size	Sets the size of the header component.	`String`	`sm`, `md`, `lg`	`md`