Headline
The main task of the <Headline> component is to serve as a title of a content section.
It should be used when you want to structure different parts of informations. That could be the page title, text headings or the title of different content parts.
The component has a level property that allows you to select a number from 1-6. This is a feature for SEO optimization, so that a rendered level="5" can look like a HTML H2 element.
Alternatively you can set this with the size prop.
With the size prop you can style the different levels.
Import
import { Headline } from '@marigold/components';Appearance
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | level-1 | level-2 | level-3 | level-4 | level-5 | level-6 | The available sizes of this component. |
Props
| Property | Type | Default | Description |
|---|---|---|---|
level | number | 1 | Set a different level from theme, values are from 1 - 6. |
align | left | center | right | - | Set the align of the headline. |
color | string | - | Set the color of the headline. |
Examples
Headline with Text
In this example you see a simple headline with some text.
Awesome Headline!
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.