Skeleton Display Text
<ahi-skeleton-display-text> | AhiSkeletonDisplayText
Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by users. Can be used for content in or outside of a card.
<ahi-skeleton-display-text></ahi-skeleton-display-text>
Examples
Sizes
Small
Use this to represent small display text such as content headings.
<ahi-skeleton-display-text size="small"></ahi-skeleton-display-text>
Medium and large
Use this to represent medium and large display text such as large metrics on the vitals page, or for page titles.
<ahi-skeleton-display-text size="medium"></ahi-skeleton-display-text>
Extra large
Use this to represent extra large display text.
<ahi-skeleton-display-text size="extraLarge"></ahi-skeleton-display-text>
Max width
To set a maximum width of the text, use the --max-width custom property.
<ahi-skeleton-display-text style="--max-width: 50%;"></ahi-skeleton-display-text>
Best practices
Skeleton display text should:
- Give users an indication of what the page content will be once loaded
- Use real content for display text that never changes
Content guidelines
Show static display text that that never changes on a page.
Related components
- Use this component with Skeleton body text to represent the content of page before it has loaded.
- When giving feedback for in-context operations, use Progress bar or Spinner components.
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/skeleton-display-text/skeleton-display-text.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/skeleton-display-text/skeleton-display-text.js';Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
size
|
Size of the text. |
'small' | 'medium' | 'large' | 'extraLarge'
|
'medium'
|
|
effect
|
Determines which effect the skeleton will use. |
'pulse' | 'sheen' | 'none'
|
'sheen'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Custom Properties
| Name | Description | Default |
|---|---|---|
--max-width |
The maximum width of the text. | 120px |
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the skeleton-display-text part instead. |
skeleton-display-text |
The component’s outer wrapper. |
indicator |
The skeleton’s indicator which is responsible for it’s color. |
Learn more about customizing CSS parts.