Header

This is a Header component.

---
import { Header } from "wf-components";
---

<Header>This is a Header component.</Header>

Props

as

Defaults to h1. The type of header component to display. Can be h1, h2, h3, h4, h5, or h6.

This is a h1 component.

This is a h2 component.

This is a h3 component.

This is a h4 component.

This is a h5 component.

This is a h6 component.

---
import { Header } from "wf-components";
---
<Header as="h1">This is a h1 component.</Header>
<Header as="h2">This is a h2 component.</Header>
<Header as="h3">This is a h3 component.</Header>
<Header as="h4">This is a h4 component.</Header>
<Header as="h5">This is a h5 component.</Header>
<Header as="h6">This is a h6 component.</Header>

size

In some cases a bigger header is needed, the size prop has a hero option for this purpose.

This is a hero header component.

---
import { Header } from "wf-components";
---
<Header size="hero">This is a hero header component.</Header>