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: 9px; 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
Set type="display" for large display headings. This changes how size is interpreted: instead of the regular text scale (4xl–4xs), size now selects from the display scale, which only defines lg, md, sm, and xs (48 / 36 / 30 / 24px).
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 size="md" weight="regular">Your text here</HLText>Using HLText with HLEllipsis
When you need HLText to truncate, wrap it inside the HLEllipsis default slot — put HLEllipsis on the outside and HLText on the inside. HLEllipsis measures and truncates whatever it renders in its slot, so the HLText has to live within it. Doing it the other way around (HLText wrapping HLEllipsis) will not truncate reliably.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<template>
<!-- ✅ Correct: HLEllipsis wraps HLText -->
<HLEllipsis id="text-with-ellipsis-example" :line-clamp="2" :tooltipProps="{ width: 400 }">
<HLText size="md" weight="regular">{{ longText }}</HLText>
</HLEllipsis>
<!-- ❌ Incorrect: HLText wraps HLEllipsis — truncation may not work -->
<HLText size="md" weight="regular">
<HLEllipsis id="text-with-ellipsis-example" :line-clamp="2">{{ longText }}</HLEllipsis>
</HLText>
</template>
<script setup lang="ts">
import { HLText, HLEllipsis } from '@platform-ui/highrise'
</script>Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs' | '4xs' | 'md' | The font-size of the text. When type="display", only lg / md / sm / xs apply (see Display Sizes). |
| weight | 'regular' | 'medium' | 'semibold' | 'bold' | 'regular' | The font-weight of the text |
| html-tag | string | 'p' | The HTML tag to be used for the text element |
| type | 'text' | 'display' | 'text' | Text scale used. display reinterprets size against the larger display scale; see Display Sizes. |
| disabled | boolean | false | Renders the text in a muted, disabled color |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | The default content slot |