Headline
The Headline component is a versatile, responsive typography component designed for displaying headings in your application. It offers various header styles and animations while providing the essential text properties inherited from the Text component.
Importing
_10import { Headline } from '@ef-global/backpack/Text';
Props
| Name | Type | Default | Description |
| variant | TextHeader | BreakpointProp<TextHeader> | Specifies the header variant or responsive variants based on breakpoints. | |
| animated | boolean | false | Determines if the headline text should have an animation applied. |
| ...rest | TextProps | Other properties inherited from the Text component. |
Usage
Display1
The five boxing wizards jumped quickly. The five boxing wizards jumped quickly.
_10<Headline as={'h1'} variant={'display1'}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>
Animated
_10<Headline as={'h1'} variant={'display1'} animated={true}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>
Display2
The five boxing wizards jumped quickly. The five boxing wizards jumped quickly.
_10<Headline as={'h1'} variant={'display2'}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>
Header1
The five boxing wizards jumped quickly. The five boxing wizards jumped quickly.
_10<Headline as={'h1'} variant={'header1'}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>
Header2
The five boxing wizards jumped quickly. The five boxing wizards jumped quickly.
_10<Headline as={'h1'} variant={'header2'}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>
Header3
The five boxing wizards jumped quickly. The five boxing wizards jumped quickly.
_10<Headline as={'h1'} variant={'header3'}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>
Header4
The five boxing wizards jumped quickly. The five boxing wizards jumped quickly.
_10<Headline as={'h1'} variant={'header4'}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>
Header5
The five boxing wizards jumped quickly. The five boxing wizards jumped quickly.
_10<Headline as={'h1'} variant={'header5'}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>
Header6
The five boxing wizards jumped quickly. The five boxing wizards jumped quickly.
_10<Headline as={'h1'} variant={'header6'}>_10 The five boxing wizards jumped quickly. The five boxing wizards jumped_10 quickly._10</Headline>