Trend indicator
A standalone directional metric caption.
Try it
Falling cost
A decrease judged beneficial.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_trend_indicator.html" with trend=trend trend_label=trend_label sentiment=sentiment %}context = {'trend': 'down', 'trend_label': '2.6 days lower, which is better', 'sentiment': 'good'}Guide
Add it to your project
- Include it with a direction and visible comparison copy.
- Add sentiment only when the consumer can judge the direction as good or bad.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| trend | string | Not set | Yes | Direction; falsy values render nothing. Allowed: up, down, flat. Constraint: Allowed values: `up`, `down`, `flat`. |
| trend_label | string | Not set | No | Visible comparison wording. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| sentiment | string | Not set | No | Optional independent judgement colour. Allowed: good, bad. Constraint: Allowed values: `good`, `bad`. |
| css_class | string | Not set | No | Escaped extra class tokens. 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
- Decorative glyph always pairs with hidden direction words, so colour never carries the meaning alone.
- Responsive
- No breakpoint switch.
- Without JavaScript
- Static text and icon.
Need help?
Troubleshooting
Contract check: unrecognised value is a caller error the template declines to guess at
Use only the documented trend and sentiment literals. This include has no validation layer and deliberately does not guess unknown values.
Explore next