Heading
To implement the Heading component into your project you’ll need to add the import:
import Heading from "@kiwicom/orbit-components/lib/Heading";
After adding import to your project you can use it simply like:
<Heading>Hello World!</Heading>
Props
The table below contains all types of props available in the Heading component.
| Name | Type | Default | Description |
|---|---|---|---|
| as | enum | "div" | The element used for the root node. |
| children | React.Node | The content of the Heading. | |
| dataTest | string | Optional prop for testing purposes. | |
| align | enum | left | text-align of Heading component |
| dataA11ySection | string | ID for a <SkipNavigation> component. | |
| id | string | Adds id HTML attribute to an element. Expects a unique ID. | |
| inverted | boolean | The true, the Heading color will be white. | |
| spaceAfter | enum | Additional margin-bottom after component. See this docs | |
| type | enum | "title1" | The size type of Heading. |
| mediumMobile | Object | Object for setting up properties for the mediumMobile viewport. See Media queries | |
| largeMobile | Object | Object for setting up properties for the largeMobile viewport. See Media queries | |
| tablet | Object | Object for setting up properties for the tablet viewport. See Media queries | |
| desktop | Object | Object for setting up properties for the desktop viewport. See Media queries | |
| largeDesktop | Object | Object for setting up properties for the largeDesktop viewport. See Media queries |
enum
| as | type | align |
|---|---|---|
"h1" | "display" | start |
"h2" | "displaySubtitle" | end |
"h3" | "title1" | center |
"h4" | "title2" | justify |
"h5" | "title3" | |
"h6" | "title4" | |
"div" | "title5" | |
"title6" |
Media Queries
To make Heading responsive you can use props mediumMobile, largeMobile, tablet, desktop and largeDesktop,
which match the mediaQueries functions and contain the following properties:
| Name | Type | Default | Description |
|---|---|---|---|
| type | enum | "title1" | The size type of Heading. |
| spaceAfter | enum | Additional margin-bottom after component. See this docs |