Ranked list

Documentation

All components Component Brickwork 4.3.1

Try it

Share of total

Open full-page preview

Ranked traffic sources.

Direct 4,200 visits
Search 2,700 visits Share of visits: 38%

Top sources

Use for rank-ordered measurements, rather than progress towards a target.

Use it

Working invocation

This code creates the configuration shown above. Copy the template and the required Python context together.

{% load brickwork_components %}
{% bw_ranked_list rows=rows basis=basis label=label caption=caption secondary_caption=secondary_caption %}

context = {'rows': [{'label': 'Direct', 'amount': 4200, 'value': '4,200 visits'}, {'label': 'Search', 'amount': 2700, 'value': '2,700 visits', 'secondary': '38%'}], 'basis': 'total', 'label': 'Traffic sources', 'caption': 'Top sources', 'secondary_caption': 'Share of visits'}

Guide

Add it to your project

Load `brickwork_components`.
Call `bw_ranked_list` with row mappings containing `label` and numeric `amount`.
Provide `secondary_caption` if any row has secondary data.

View this component's source for the installed release

Options

Public API

Option	Type	Default	Required	Description
rows	list of mappings	Not set	Yes	Rows require label and amount; optional value, secondary, secondary_text, href and data. Constraint: Use records in the documented column order; preserve a cell for every declared column.
basis	string	max	No	Bar calculation basis. Allowed: max, total. Constraint: Allowed values: `max`, `total`.
label	string	Empty string	No	Optional ordered-list accessible name. Constraint: Use concise visible text that identifies the control or measurement.
loading	boolean	False	No	Shows skeleton rows. Constraint: Use only for a temporary loading state and replace it with real or error content.
caption	string	Empty string	No	Top-N or truncation note. Constraint: Describe the specimen when a visible figure caption adds context.
secondary_caption	string	Empty string	No	Required when a row provides secondary data. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
empty_heading	string	Empty string	No	Empty-state heading. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
empty_body	string	Empty string	No	Empty-state copy. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
empty_action_href	string	Empty string	No	Empty-state action URL. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
empty_action_label	string	Empty string	No	Empty-state action label. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
data	mapping	Empty string	No	Consumer-owned data-* attributes. Constraint: Use the component's documented structured data shape; it is not a scalar visitor control.

Behaviour

Accessibility and responsive behaviour

Accessibility: An ordered list exposes labels and values as text; bars are decorative. Linked rows are real anchors.
Responsive: Server-computed geometry has no layout shift or breakpoint switch.
Without JavaScript: Rows and empty state render on the server.

Need help?

Troubleshooting

Contract check: caption inside each secondary cell. The tag requires secondary_caption

When any row supplies secondary data, supply `secondary_caption`; the tag requires the column heading.

Explore next