DocSpace-client/packages/common/components/Headline/README.md

1.6 KiB

Headline

Component that displays Heading text with custom styles

Usage

import Headline from "@docspace/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)