# List layout

Compare the same six resources.

ID: list-layout
Language: en
Revision: 3
Translation source revision: 3
Canonical: https://kickoff.jujin.dev/en/catalog/list-layout/

## Why: the goal or problem

Readers need to compare long titles and metadata. Scattered card contents force them to hunt for the same field repeatedly.

## How: work toward a solution

All six layouts use the same six resources, labels, and colors. Filter a topic, reverse collection order, open study notes, or narrow the preview. Compare the reading flow while the content stays the same. Reset or reload restores the full collection and original order. Images and text repeat in aligned rows.

## What: the concept

**List layout** — Repeated rows keep title, summary, and metadata in predictable positions.

Long summaries can hide the pattern; keep row content concise.

[W3C](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)