2019-12-04 09:36:13 +00:00
# Heading
Heading text structured in levels.
## Usage
```js
2021-02-25 21:19:45 +00:00
import Heading from "@appserver/components/heading";
2019-12-04 09:36:13 +00:00
```
```jsx
2019-12-06 09:09:56 +00:00
< Heading level = {1} title = "Some title" >
2019-12-04 09:36:13 +00:00
Some text
< / Heading >
```
### If you need to override styles add forwardedAs instead of as
```js
const StyledHeading = styled(Heading)`
& :hover {
border-bottom: 1px dotted;
}
`;
```
```jsx
< Style dHeading forwardedAs = "h2" title = "Some title" >
Some text
< / StyledHeading >
```
### Properties
2019-12-10 06:44:18 +00:00
| Props | Type | Required | Values | Default | Description |
| ---------- | :------: | :------: | :--------------------------------------------: | :-------: | ------------------------------------------------------------------------------------------------------------------------------------- |
| `color` | `string` | - | - | `#333333` | Specifies the headline color |
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
| `level` | `oneOf` | - | 1, 2, 3, 4, 5, 6 | `1` | The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. |
| `size` | `oneOF` | - | `xsmall` , `small` , `medium` , `large` , `xlarge` | `large` | Sets the size of headline |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |