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.

<i-header class="_text-align:center">
    <h1>Inkline Header</h1>
    <p>This is a header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="primary">Button</i-button>
</i-header>

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.

<i-header color="light" class="_text-align:center">
    <h1>Inkline Light Header</h1>
    <p>This is a header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="primary">Button</i-button>
</i-header>

<i-header color="dark" class="_text-align:center">
    <h1>Inkline Dark Header</h1>
    <p>This is a header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="primary">Button</i-button>
</i-header>

<i-header color="primary" class="_text-align:center">
    <h1>Inkline Primary Header</h1>
    <p>This is a header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="light">Button</i-button>
</i-header>

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.

<i-header size="sm" class="_text-align:center">
    <h1>Small Inkline Header</h1>
    <p>This is a small header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="primary">Button</i-button>
</i-header>

<i-header size="md" class="_text-align:center">
    <h1>Medium Inkline Header</h1>
    <p>This is a small header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="primary">Button</i-button>
</i-header>

<i-header size="lg" class="_text-align:center">
    <h1>Large Inkline Header</h1>
    <p>This is a small header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="primary">Button</i-button>
</i-header>

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.

<i-header fullscreen class="_text-align:center">
    <h1>Fullscreen Inkline Header</h1>
    <p>This is a fullscreen header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="primary">Button</i-button>
</i-header>

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.

<i-header id="cover-header" cover class="_text-align:center _color:white">
    <h1>Cover Inkline Header</h1>
    <p>This is a cover background header paragraph lorem ipsum dolor sit amet.</p>
    <i-button color="primary">Button</i-button>
</i-header>

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