Header
A lightweight, responsive header component used for showcasing hero unit style content.
Basic Example
Here’s an example of a basic header component. Usually, this component is used on homepages and landing pages and has an attractive background image.
Inkline Header
This is a header paragraph lorem ipsum dolor sit amet.
Color Variants
You can set the style of a <i-header>
using the color
property.
Inkline Light Header
This is a header paragraph lorem ipsum dolor sit amet.
Inkline Dark Header
This is a header paragraph lorem ipsum dolor sit amet.
Inkline Primary Header
This is a header paragraph lorem ipsum dolor sit amet.
Size Variants
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 small header paragraph lorem ipsum dolor sit amet.
Large Inkline Header
This is a small 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 cover background header paragraph lorem ipsum dolor sit amet.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
color
Type'primary' | 'light' | 'dark'
Default'light'
Description The color variant of the header - Property
cover
TypeBoolean
Defaultfalse
Description Display the header background as cover, always covering the whole header width or height - Property
fluid
TypeBoolean
Defaultfalse
Description Display the inner content container as fluid, covering 100% of the header width - Property
fullscreen
TypeBoolean
Defaulttrue
Description Display the header as fullscreen, covering 100% screen height and 100% screen width - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the header
Events
Use events to react to something happening inside the component.
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('light')
Description The background of the header component - Property
----color
Valuecontrast-color($color-light)
Description The color of the header component - Property
----padding-top
Value10rem
Description The padding top of the header component - Property
----padding-right
Value0
Description The padding right of the header component - Property
----padding-bottom
Value10rem
Description The padding bottom of the header component - Property
----padding-left
Value0
Description The padding left of the header component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the header component