Text
<ahi-text> | AhiText
Typography helps establish hierarchy and communicate important content by creating clear visual patterns.
This component has been deprecated. Use the
type utility classes instead —
ahi-text-body, ahi-text-heading, ahi-text-caption and the rest,
with modifiers for color, weight, alignment and truncation.
They ship inside every theme, so loading light.css or dark.css is enough — no
second stylesheet. There is an attribute-to-class table at
Migrating from <ahi-text>.
Every property this component has is plain CSS, so each instance costs a custom-element definition, a shadow root and a style recalculation to do what the platform does for free. It still works and is not being removed; removal will be considered at the next major.
Examples
Heading
Use to create various levels of hierarchy on the page.
<div style="display: flex; flex-direction: column; gap: 1rem;">
<ahi-text variant="heading-3xl" as="h2">Patient stats dashboard</ahi-text>
<ahi-text variant="heading-2xl" as="h3">Patient stats dashboard</ahi-text>
<ahi-text variant="heading-xl" as="h4">Patient stats dashboard</ahi-text>
<ahi-text variant="heading-lg" as="h5">Patient stats dashboard</ahi-text>
<ahi-text variant="heading-md" as="h6">Patient stats dashboard</ahi-text>
<ahi-text variant="heading-sm" as="h6">Patient stats dashboard</ahi-text>
<ahi-text variant="heading-xs" as="h6">Patient stats dashboard</ahi-text>
</div>
Body
Use to create a range of body text. These styles are primarily used within components and blocks of text.
<div style="display: flex; flex-direction: column; gap: 1rem;">
<ahi-text variant="body-lg">
Azalea Health was included in Inc 5000's prestigious list of the fastest growing companies in America for the 5th
year in a row!
</ahi-text>
<ahi-text variant="body-md">
Azalea Health was included in Inc 5000's prestigious list of the fastest growing companies in America for the 5th
year in a row!
</ahi-text>
<ahi-text variant="body-sm">
Azalea Health was included in Inc 5000's prestigious list of the fastest growing companies in America for the 5th
year in a row!
</ahi-text>
<ahi-text variant="body-xs">
Azalea Health was included in Inc 5000's prestigious list of the fastest growing companies in America for the 5th
year in a row!
</ahi-text>
</div>
Align
Use to set text alignment.
<div style="display: flex; flex-direction: column; gap: 1rem;">
<ahi-text alignment="start">
Unify patient data into a single, efficient record of truth that translates across all components of our
platform—meaning your team is always in the know when it comes to your patients' care.
</ahi-text>
<ahi-text alignment="center">
Unify patient data into a single, efficient record of truth that translates across all components of our
platform—meaning your team is always in the know when it comes to your patients' care.
</ahi-text>
<ahi-text alignment="end">
Unify patient data into a single, efficient record of truth that translates across all components of our
platform—meaning your team is always in the know when it comes to your patients' care.
</ahi-text>
<ahi-text alignment="justify">
Unify patient data into a single, efficient record of truth that translates across all components of our
platform—meaning your team is always in the know when it comes to your patients' care.
</ahi-text>
</div>
When you use justify, space is added between words so that both edges of each line are
aligned with both margins. The last line in the paragraph is aligned left.
Weight
Use to give text a range of font weights.
<div style="display: flex; flex-direction: column; gap: 1rem;">
<ahi-text font-weight="bold"> Patients this year </ahi-text>
<ahi-text font-weight="semibold"> Patients this year </ahi-text>
<ahi-text font-weight="medium"> Patients this year </ahi-text>
<ahi-text font-weight="regular"> Patients this year </ahi-text>
</div>
Color
Use to set text color.
<div style="display: flex; flex-direction: column; gap: 1rem;">
<ahi-text color="subdued">
Use to de-emphasize a piece of text that is less important to users than other nearby text. May also be used to
indicate when normal content is absent, for example, “No diagnoses listed”. Don't use only for aesthetic effect.
</ahi-text>
<ahi-text color="success">
Use in combination with a symbol showing an increasing value to indicate an upward trend.
</ahi-text>
<ahi-text color="warning">
Use to denote something that needs attention, or that users need to take action on.
</ahi-text>
<ahi-text color="critical">
Use in combination with a symbol showing a decreasing value to indicate a downward trend.
</ahi-text>
</div>
Decoration
Use to define text decoration.
<ahi-text text-decoration="line-through">Strikethrough this text</ahi-text>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/text/text.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/text/text.js';Slots
| Name | Description |
|---|---|
| (default) |
The text’s content. Each variant sizes itself on an element inside this shadow root, so setting
font-size on <ahi-text> from outside has no effect. Use the variant
token instead.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
alignment
|
Adjust horizontal alignment of text. |
'start' | 'center' | 'end' | 'justify' | undefined
|
- | |
as
|
The element type. |
'dt' | 'dd' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'strong' | 'legend' |
undefined
|
- | |
breakWord
break-word
|
Prevent text from overflowing. |
boolean
|
false
|
|
color
|
Adjust color of text. |
'success' | 'critical' | 'warning' | 'subdued' | undefined
|
- | |
fontWeight
font-weight
|
Adjust weight of text. |
'regular' | 'medium' | 'semibold' | 'bold' | undefined
|
- | |
numeric
|
Use a numeric font variant with monospace appearance. |
boolean
|
false
|
|
truncate
|
Truncate text overflow with ellipsis. |
boolean
|
false
|
|
variant
|
Typographic style of text. |
'heading-xs' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'heading-xl' | 'heading-2xl' |
'heading-3xl' | 'body-xs' | 'body-sm' | 'body-md' | 'body-lg'
|
'body-md'
|
|
visuallyHidden
visually-hidden
|
Visually hide the text. |
boolean
|
false
|
|
textDecoration
text-decoration
|
Add a line-through to the text. |
'line-through' | undefined
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Custom Properties
| Name | Description | Default |
|---|---|---|
--ahi-text-heading-xs-font-size |
Size of the heading-xs variant (12px). |
var(–ahi-font-size-300) |
--ahi-text-heading-sm-font-size |
Size of the heading-sm variant (14px). |
var(–ahi-font-size-350) |
--ahi-text-heading-md-font-size |
Size of the heading-md variant (14px). |
var(–ahi-font-size-350) |
--ahi-text-heading-lg-font-size |
Size of the heading-lg variant (20px). |
var(–ahi-font-size-500) |
--ahi-text-heading-xl-font-size |
Size of the heading-xl variant (24px). |
var(–ahi-font-size-600) |
--ahi-text-body-xs-font-size |
Size of the body-xs variant (12px). |
var(–ahi-font-size-300) |
--ahi-text-body-sm-font-size |
Size of the body-sm variant (12px). |
var(–ahi-font-size-300) |
--ahi-text-body-md-font-size |
Size of the body-md variant (14px). |
var(–ahi-font-size-350) |
--ahi-text-body-lg-font-size |
Size of the body-lg variant (14px). |
var(–ahi-font-size-350) |
Learn more about customizing CSS custom properties.