@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
57 lines (44 loc) • 5.49 kB
Markdown
# Heading
To implement Heading component into your project you'll need to add the import:
```jsx
import Heading from "@kiwicom/orbit-components/lib/Heading";
```
After adding import into your project you can use it simply like:
```jsx
<Heading>Hello World!</Heading>
```
## Props
Table below contains all types of the props available in Heading component.
| Name | Type | Default | Description |
| :-------------- | :------------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as | [`enum`](#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`](#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](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) |
| **type** | [`enum`](#enum) | `"title1"` | The size type of Heading. |
| mediumMobile | [`Object`](#media-queries) | | Object for setting up properties for the mediumMobile viewport. [See Media queries](#media-queries) |
| largeMobile | [`Object`](#media-queries) | | Object for setting up properties for the largeMobile viewport. [See Media queries](#media-queries) |
| tablet | [`Object`](#media-queries) | | Object for setting up properties for the tablet viewport. [See Media queries](#media-queries) |
| desktop | [`Object`](#media-queries) | | Object for setting up properties for the desktop viewport. [See Media queries](#media-queries) |
| largeDesktop | [`Object`](#media-queries) | | Object for setting up properties for the largeDesktop viewport. [See Media queries](#media-queries) |
### enum
| as | type | align |
| :------ | :------------------ | :-------- |
| `"h1"` | `"display"` | `start` |
| `"h2"` | `"displaySubtitle"` | `end` |
| `"h3"` | `"title1"` | `center` |
| `"h4"` | `"title2"` | `justify` |
| `"h5"` | `"title3"` | |
| `"h6"` | `"title4"` | |
| `"div"` | `"title5"` | |
### Media Queries
To make Heading responsive you can use props `mediumMobile`, `largeMobile`, `tablet`, `desktop` and `largeDesktop`,
which match the [mediaQueries](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/utils/mediaQuery) functions and contain the following properties:
| Name | Type | Default | Description |
| :--------- | :-------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **type** | [`enum`](#enum) | `"title1"` | The size type of Heading. |
| spaceAfter | `enum` | | Additional `margin-bottom` after component. [See this docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) |