Example
Here’s an example of the basic components included in a <i-navbar> that automatically collapses responsively.
<i-header class="_text-center">
<h1>Inkline Header</h1>
<p>This is a header paragraph lorem ipsum dolor sit amet.</p>
<i-button variant="primary">Button</i-button>
</i-header>
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.
<i-header size="sm" class="_text-center">
<h1>Small Inkline Header</h1>
<p>This is a small header paragraph lorem ipsum dolor sit amet.</p>
<i-button variant="primary">Button</i-button>
</i-header>
<i-header size="md" class="_text-center">
<h1>Medium Inkline Header</h1>
<p>This is a medium header paragraph lorem ipsum dolor sit amet.</p>
<i-button variant="primary">Button</i-button>
</i-header>
<i-header size="lg" class="_text-center">
<h1>Large Inkline Header</h1>
<p>This is a large header paragraph lorem ipsum dolor sit amet.</p>
<i-button variant="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.
<i-header fullscreen class="_text-center">
<h1>Fullscreen Inkline Header</h1>
<p>This is a fullscreen header paragraph lorem ipsum dolor sit amet.</p>
<i-button variant="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
<i-header id="header" :cover="true" class="_text-center _text-white">
<h1>Cover Inkline Header</h1>
<p>This is a cover background header paragraph lorem ipsum dolor sit amet.</p>
<i-button variant="primary">Button</i-button>
</i-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.
Property cover
Type Boolean
Accepted true, false
Default true
Description Sets the background image as cover, resizing itself responsively to fit the header size.
Property fluid
Type Boolean
Accepted true, false
Default false
Description Sets the IContainer wrapping the headers's content as fluid.
Property fullscreen
Type Boolean
Accepted true, false
Default false
Description Sets the Header component to cover the whole screen width and height.
Property size
Type String
Accepted sm, md, lg
Default md
Description Sets the size of the header component.
Property variant
Type String
Accepted light, dark
Default light
Description Sets the color variant of the header component.
Description Slot for header default content.
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.
Property $header-padding-base
Default 10rem
Property $header-padding
Default size-map($header-padding-base, $sizes, $size-multipliers)
Property $header-color-for-light-variant
Default $color-for-light-variant
Property $header-color-for-dark-variant
Default $color-for-dark-variant
Property $header-variant-{variant}
Default header-variant($color-{variant})
Property $header-variants
Default (
light: $header-variant-light,
dark: $header-variant-dark
)
Default @function header-variant($variant) {
$header-variant-background: $variant;
$variant-map: (
background: $header-variant-background
);
@return $variant-map;
}
Inkline