Skeleton elements are used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by users.
| Component Name | Development Status |
|---|---|
| Skeleton Body Text | DONE |
| Skeleton Heading | DONE |
| Skeleton Thumbnail | DONE |
You can find all examples for components developed in this module here.
SkeletonBodyText component also takes lines to render desired amount of lines.
This component composes styled-system
| Property Name | Type | Description |
|---|---|---|
| lines - 3 | number | How many lines will be rendered. |
SkeletonHeading component also takes width to render heading with desired width. Default width is 200px.
SkeletonHeading can also take variant property to match the exact same height of headings.
This component composes styled-system
| Property Name | Type | Description |
|---|---|---|
| variant - 'h1' | enum | Set the same height with heading elements. |
SkeletonThumbnail component takes width and height properties. And also borderRadius.
This component composes styled-system
| Property Name | Type | Description |
|---|---|---|
| height - 100 | | |
| width - 100 | |