Skeleton
A labelled loading placeholder group.
Try it
Card loading
Three loading rows.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% load brickwork_components %}
{% bw_skeleton variant=variant count=count %}context = {'variant': 'row', 'count': 3}Guide
Add it to your project
- Load `brickwork_components`.
- Call `bw_skeleton` with a variant and positive count.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| variant | string | text | No | Shape style. Allowed: text, title, row, block. Constraint: Use one of the documented variants; use `danger`, not an invented `error` severity. |
| count | integer | 1 | No | Number of shapes. Constraint: Must be a positive integer. |
| width | CSS length | Empty string | No | Overrides default shape width. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| height | CSS length | Empty string | No | Overrides default shape height. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- One aria-busy group announces loading; individual shapes are aria-hidden.
- Responsive
- Dimensions are variant or caller driven.
- Without JavaScript
- Static skeleton, with shimmer disabled for reduced motion.
Need help?
Troubleshooting
Contract check: never {% include %} this file directly, since the tag validates ``variant``
Use the skeleton tag rather than a direct include so it validates `variant` and expands `count` into a safe repeatable range.