Inkline

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.

Header Example

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.

Header Small Size

Small Inkline Header

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

Header Medium Size

Medium Inkline Header

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

Header Large Size

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.

Fullescreen Header

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

Header Cover Background

Cover Inkline Header

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

API

Header API <i-header>
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