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.
<template>
<IHeader class="_text-align:center">
<h1>Inkline Header</h1>
<p>This is a header paragraph lorem ipsum dolor sit amet.</p>
<IButton color="primary">Button</IButton>
</IHeader>
</template>
You can set the style of a <IHeader> using the color property.
<template>
<IHeader color="light" class="_text-align:center">
<h1>Inkline Light Header</h1>
<p>This is a header paragraph lorem ipsum dolor sit amet.</p>
<IButton color="primary">Button</IButton>
</IHeader>
<IHeader color="dark" class="_text-align:center">
<h1>Inkline Dark Header</h1>
<p>This is a header paragraph lorem ipsum dolor sit amet.</p>
<IButton color="primary">Button</IButton>
</IHeader>
<IHeader color="primary" class="_text-align:center">
<h1>Inkline Primary Header</h1>
<p>This is a header paragraph lorem ipsum dolor sit amet.</p>
<IButton color="light">Button</IButton>
</IHeader>
</template>
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.
<template>
<IHeader size="sm" class="_text-align:center">
<h1>Small Inkline Header</h1>
<p>This is a small header paragraph lorem ipsum dolor sit amet.</p>
<IButton color="primary">Button</IButton>
</IHeader>
<IHeader size="md" class="_text-align:center">
<h1>Medium Inkline Header</h1>
<p>This is a small header paragraph lorem ipsum dolor sit amet.</p>
<IButton color="primary">Button</IButton>
</IHeader>
<IHeader size="lg" class="_text-align:center">
<h1>Large Inkline Header</h1>
<p>This is a small header paragraph lorem ipsum dolor sit amet.</p>
<IButton color="primary">Button</IButton>
</IHeader>
</template>
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.
<template>
<IHeader fullscreen class="_text-align:center">
<h1>Fullscreen Inkline Header</h1>
<p>This is a fullscreen header paragraph lorem ipsum dolor sit amet.</p>
<IButton color="primary">Button</IButton>
</IHeader>
</template>
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
<template>
<IHeader
cover
style="background-image: url('../../../assets/images/moonlight.jpg')"
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>
<IButton color="primary">Button</IButton>
</IHeader>
</template>