1.6 KiB
1.6 KiB
Headline
Component that displays Heading text with custom styles
Usage
import Headline from "@appserver/common/components/Headline";
<Headline type="content" title="Some title" isInline>
Some text
</Headline>
<Headline type="header" title="Some title">
Some text
</Headline>
<Headline type="menu" title="Some title">
Some text
</Headline>
If you need to override styles add forwardedAs instead of as
const StyledText = styled(Headline)`
&:hover {
border-bottom: 1px dotted;
}
`;
<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) |