The skeleton loader component is a flexible component that can be modified to your needs by the use of modifer classes, see the examples above and the table below on how this can be used to comprise your required skeleton loader.
| Class | Use Case |
|---|---|
| .acl-skeleton-loader__card | This forms the card component of the skeleton loader. |
| .acl-skeleton-loader__card--left | This aligns the card component content to the left |
| .acl-skeleton-loader__card--center | This aligns the card component content in the center |
| .acl-skeleton-loader__card--right | This aligns the card component content to the right |
| .acl-skeleton-loader__row | This allows child components to be rendered in a flex row format |
| .acl-skeleton-loader__row--vertical-center | This positions child components of a row to be vertically aligned in the center |
| .acl-skeleton-loader__row--vertical-top | This positions child components of a row to be vertically aligned to the top |
| .acl-skeleton-loader__row--vertical-bottom | This positions child components of a row to be vertically aligned to the bottom |
| .acl-skeleton-loader__row--left | This positions child components of a row to be left aligned |
| .acl-skeleton-loader__row--center | This positions child components of a row to be center aligned |
| .acl-skeleton-loader__row--right | This positions child components of a row to be right aligned |
| .acl-skeleton-loader__row--wrap | This allows child components of a row to wrap onto the next line |
| .acl-skeleton-loader__row--space-between | This allows child components of a row to position themselves with space inbetween |
| .acl-skeleton-loader__row--space-evenly | This allows child components of a row to position themselves evenly |
| .acl-skeleton-loader__column | This allows child components of a column to be rendered in a flex column format |
| .acl-skeleton-loader__column--vertical-center | This allows child components of a column to be vertically aligned |
| .acl-skeleton-loader__column--vertical-top | This allows child components of a column to be top aligned |
| .acl-skeleton-loader__column--vertical-bottom | This allows child components of a column to be bottom aligned |
| .acl-skeleton-loader__column--center | This positions child components of a column to be center aligned |
| .acl-skeleton-loader__column--left | This positions child components of a column to be left aligned |
| .acl-skeleton-loader__column--right | This positions child components of a column to be right aligned |
| .acl-skeleton-loader__margin-left--small | This adds a small left margin to an element |
| .acl-skeleton-loader__margin-left--medium | This adds a medium left margin to an element |
| .acl-skeleton-loader__margin-left--large | This adds a large left margin to an element |
| .acl-skeleton-loader__margin-right--small | This adds a small right margin to an element |
| .acl-skeleton-loader__margin-right--medium | This adds a medium right margin to an element |
| .acl-skeleton-loader__margin-right--large | This adds a large right margin to an element |
| .acl-skeleton-loader__circle-placeholder | This adds a circle placeholder |
| .acl-skeleton-loader__circle-placeholder--small | This adjusts the placeholder to a small sized circle placeholder |
| .acl-skeleton-loader__circle-placeholder--medium | This adjusts the placeholder to a medium sized circle placeholder |
| .acl-skeleton-loader__circle-placeholder--large | This adjusts the placeholder to a large sized circle placeholder |
| .acl-skeleton-loader__square-placeholder | This adds a square placeholder |
| .acl-skeleton-loader__square-placeholder--small | This adjusts the placeholder to a small sized square placeholder |
| .acl-skeleton-loader__square-placeholder--medium | This adjusts the placeholder to a medium sized square placeholder |
| .acl-skeleton-loader__square-placeholder--large | This adjusts the placeholder to a large sized square placeholder |
| .acl-skeleton-loader__text-placeholder | This adds a text rectangle placeholder |
| .acl-skeleton-loader__text-placeholder--rounded | This adds rounded edged to the text rectangle placeholder |
| .acl-skeleton-loader__text-placeholder--small | This adjusts the placeholder to a small text rectangle placeholder |
| .acl-skeleton-loader__text-placeholder--medium | This adjusts the placeholder to a medium text rectangle placeholder |
| .acl-skeleton-loader__text-placeholder--large | This adjusts the placeholder to a large text rectangle placeholder |