Skeleton Body Text
<ahi-skeleton-body-text> | AhiSkeletonBodyText
Skeleton body 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.
Use this component to represent a block of content being loaded.
<ahi-skeleton-body-text></ahi-skeleton-body-text>
Examples
Number of lines
To set the number of lines, use the lines property.
<ahi-skeleton-body-text lines="6"></ahi-skeleton-body-text>
Best practices
Skeleton body text should:
- Be used on its own, inside any content container component (like a card), and when content loads after the main page load.
- Try to match the number of lines to the content being loaded so it gives an accurate representation.
Content guidelines
Show static content that never changes on a page and use skeleton loading for dynamic content. Skeleton body text can sometimes be used to represent non-typographic content such as forms. Don’t use placeholder content that will change when the page fully loads.
Related components
- Use this component with Skeleton display text to represent the content of page while it’s loading.
- When giving feedback for in-context operations, use Progress bar or Spinner component.
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/skeleton-body-text/skeleton-body-text.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/skeleton-body-text/skeleton-body-text.js';Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
lines
|
Number of lines to display. |
number
|
3
|
|
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.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the skeleton-body-text part instead. |
skeleton-body-text |
The component’s outer wrapper. |
indicator |
The skeleton’s indicator which is responsible for it’s color. |
Learn more about customizing CSS parts.