Typography
Text wrapper from @platform-ui/highrise for consistent typography throughout the app
Text Sizes
4xl-regular font-size: 20px; line-height: 30px; font-weight: 400; | 4xl-medium font-size: 20px; line-height: 30px; font-weight: 500; | 4xl-semibold font-size: 20px; line-height: 30px; font-weight: 600; | 4xl-bold font-size: 20px; line-height: 30px; font-weight: 700; |
3xl-regular font-size: 18px; line-height: 28px; font-weight: 400; | 3xl-medium font-size: 18px; line-height: 28px; font-weight: 500; | 3xl-semibold font-size: 18px; line-height: 28px; font-weight: 600; | 3xl-bold font-size: 18px; line-height: 28px; font-weight: 700; |
2xl-regular font-size: 16px; line-height: 24px; font-weight: 400; | 2xl-medium font-size: 16px; line-height: 24px; font-weight: 500; | 2xl-semibold font-size: 16px; line-height: 24px; font-weight: 600; | 2xl-bold font-size: 16px; line-height: 24px; font-weight: 700; |
xl-regular font-size: 15px; line-height: 20px; font-weight: 400; | xl-medium font-size: 15px; line-height: 20px; font-weight: 500; | xl-semibold font-size: 15px; line-height: 20px; font-weight: 600; | xl-bold font-size: 15px; line-height: 20px; font-weight: 700; |
lg-regular font-size: 14px; line-height: 20px; font-weight: 400; | lg-medium font-size: 14px; line-height: 20px; font-weight: 500; | lg-semibold font-size: 14px; line-height: 20px; font-weight: 600; | lg-bold font-size: 14px; line-height: 20px; font-weight: 700; |
md-regular font-size: 13px; line-height: 18px; font-weight: 400; | md-medium font-size: 13px; line-height: 18px; font-weight: 500; | md-semibold font-size: 13px; line-height: 18px; font-weight: 600; | md-bold font-size: 13px; line-height: 18px; font-weight: 700; |
sm-regular font-size: 12px; line-height: 17px; font-weight: 400; | sm-medium font-size: 12px; line-height: 17px; font-weight: 500; | sm-semibold font-size: 12px; line-height: 17px; font-weight: 600; | sm-bold font-size: 12px; line-height: 17px; font-weight: 700; |
xs-regular font-size: 11px; line-height: 16px; font-weight: 400; | xs-medium font-size: 11px; line-height: 16px; font-weight: 500; | xs-semibold font-size: 11px; line-height: 16px; font-weight: 600; | xs-bold font-size: 11px; line-height: 16px; font-weight: 700; |
2xs-regular font-size: 10px; line-height: 15px; font-weight: 400; | 2xs-medium font-size: 10px; line-height: 15px; font-weight: 500; | 2xs-semibold font-size: 10px; line-height: 15px; font-weight: 600; | 2xs-bold font-size: 10px; line-height: 15px; font-weight: 700; |
3xs-regular font-size: 9px; line-height: 14px; font-weight: 400; | 3xs-medium font-size: 9p; line-height: 14px; font-weight: 500; | 3xs-semibold font-size: 9px; line-height: 14px; font-weight: 600; | 3xs-bold font-size: 9px; line-height: 14px; font-weight: 700; |
4xs-regular font-size: 8px; line-height: 12px; font-weight: 400; | 4xs-medium font-size: 8px; line-height: 12px; font-weight: 500; | 4xs-semibold font-size: 8px; line-height: 12px; font-weight: 600; | 4xs-bold font-size: 8px; line-height: 12px; font-weight: 700; |
Display Sizes
display-lg-regular font-size: 48px; line-height: 60px; font-weight: 400; | display-lg-medium font-size: 48px; line-height: 60px; font-weight: 500; | display-lg-semibold font-size: 48px; line-height: 60px; font-weight: 600; | display-lg-bold font-size: 48px; line-height: 60px; font-weight: 700; |
display-md-regular font-size: 36px; line-height: 44px; font-weight: 400; | display-md-medium font-size: 36px; line-height: 44px; font-weight: 500; | display-md-semibold font-size: 36px; line-height: 44px; font-weight: 600; | display-md-bold font-size: 36px; line-height: 44px; font-weight: 700; |
display-sm-regular font-size: 30px; line-height: 38px; font-weight: 400; | display-sm-medium font-size: 30px; line-height: 38px; font-weight: 500; | display-sm-semibold font-size: 30px; line-height: 38px; font-weight: 600; | display-sm-bold font-size: 30px; line-height: 38px; font-weight: 700; |
display-xs-regular font-size: 24px; line-height: 32px; font-weight: 400; | display-xs-medium font-size: 24px; line-height: 32px; font-weight: 500; | display-xs-semibold font-size: 24px; line-height: 32px; font-weight: 600; | display-xs-bold font-size: 24px; line-height: 32px; font-weight: 700; |
Font Tokens
All font tokens will be available to use with your custom CSS classes as well. The token format follows the pattern: --hr-{font-size | line-height}-{size} for sizes and line-heights; and --hr-font-weight-{weight} for weights.
.some-css-class {
font-size: var(--hr-font-size-4xl)
line-height: var(--hr-line-height-4xl)
font-weight: var(--hr-font-weight-semibold)
}
.some-other-css-class {
font-size: var(--hr-font-size-display-md)
line-height: var(--hr-line-height-display-md)
font-weight: var(--hr-font-weight-bold)
}Code
import { HLText } from '@platform-ui/highrise'<HLText id="example-text" size="md" weight="regular">Your text here</HLText>Props
| Name | Type | Default | Description |
|---|---|---|---|
| id * | string | undefined | The id of the element |
| size | '4xl' | '3xl' | '2xl' | 'xl' | 'lg ' | 'md ' | 'sm ' | 'xs ' | '2xs' | '3xs' | '4xs' | 'md' | The font-size of the text |
| weight | 'regular' | 'medium' | 'semibold' | 'bold' | 'regular' | The font-weight of the text |
| class | string | undefined | The CSS class to be attached to the typography wrapper element |
| html-tag | string | 'p' | The HTML tag to be used for the text element |
| type | 'text' | 'display' | 'text' | The type of text - regular text or display text |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | The default content slot |