2019-12-09 12:12:25 +00:00
|
|
|
# Headline
|
2019-12-06 13:13:48 +00:00
|
|
|
|
2019-12-09 12:12:25 +00:00
|
|
|
Component that displays Heading text with custom styles
|
2019-12-06 13:13:48 +00:00
|
|
|
|
2019-12-09 13:54:10 +00:00
|
|
|
### Usage
|
2019-12-06 13:13:48 +00:00
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import Headline from "@appserver/common/components/Headline";
|
2019-12-06 13:13:48 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
```jsx
|
2019-12-09 12:12:25 +00:00
|
|
|
<Headline type="content" title="Some title" isInline>
|
2019-12-06 13:13:48 +00:00
|
|
|
Some text
|
2019-12-09 12:12:25 +00:00
|
|
|
</Headline>
|
2019-12-06 13:13:48 +00:00
|
|
|
```
|
|
|
|
|
2019-12-23 12:37:36 +00:00
|
|
|
```jsx
|
|
|
|
<Headline type="header" title="Some title">
|
|
|
|
Some text
|
|
|
|
</Headline>
|
|
|
|
```
|
|
|
|
|
2019-12-06 13:13:48 +00:00
|
|
|
```jsx
|
2019-12-09 12:12:25 +00:00
|
|
|
<Headline type="menu" title="Some title">
|
2019-12-06 13:13:48 +00:00
|
|
|
Some text
|
2019-12-09 12:12:25 +00:00
|
|
|
</Headline>
|
2019-12-06 13:13:48 +00:00
|
|
|
```
|
|
|
|
|
2019-12-09 13:54:10 +00:00
|
|
|
#### If you need to override styles add forwardedAs instead of as
|
2019-12-06 13:13:48 +00:00
|
|
|
|
|
|
|
```js
|
2019-12-09 12:12:25 +00:00
|
|
|
const StyledText = styled(Headline)`
|
2019-12-06 13:13:48 +00:00
|
|
|
&:hover {
|
|
|
|
border-bottom: 1px dotted;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
```
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
<StyledText forwardedAs="span" title="Some title">
|
|
|
|
Some text
|
|
|
|
</StyledText>
|
|
|
|
```
|
|
|
|
|
|
|
|
### Properties
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| ---------- | :------: | :------: | :---------------------: | :-------: | ------------------------------------------------------------------- |
|
|
|
|
| `color` | `string` | - | - | `#333333` | Specifies the contentHeader color |
|
|
|
|
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
|
|
|
|
| `title` | `bool` | - | - | - | Title |
|
|
|
|
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|
2019-12-23 12:37:36 +00:00
|
|
|
| `type` | `oneOf` | ✅ | `content, header, menu` | - | Sets the size of text: content (21px), header (28px) or menu (27px) |
|