54 lines
1.6 KiB
Markdown
54 lines
1.6 KiB
Markdown
# Headline
|
|
|
|
Component that displays Heading text with custom styles
|
|
|
|
### Usage
|
|
|
|
```js
|
|
import Headline from "@appserver/common/components/Headline";
|
|
```
|
|
|
|
```jsx
|
|
<Headline type="content" title="Some title" isInline>
|
|
Some text
|
|
</Headline>
|
|
```
|
|
|
|
```jsx
|
|
<Headline type="header" title="Some title">
|
|
Some text
|
|
</Headline>
|
|
```
|
|
|
|
```jsx
|
|
<Headline type="menu" title="Some title">
|
|
Some text
|
|
</Headline>
|
|
```
|
|
|
|
#### If you need to override styles add forwardedAs instead of as
|
|
|
|
```js
|
|
const StyledText = styled(Headline)`
|
|
&:hover {
|
|
border-bottom: 1px dotted;
|
|
}
|
|
`;
|
|
```
|
|
|
|
```jsx
|
|
<StyledText forwardedAs="span" title="Some title">
|
|
Some text
|
|
</StyledText>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| 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 |
|
|
| `type` | `oneOf` | ✅ | `content, header, menu` | - | Sets the size of text: content (21px), header (28px) or menu (27px) |
|