LCDL rich component vocabulary

Updated

Use components intentionally

Component Best use Notes
Hero band Home and major hubs 1 headline, 1 paragraph, 2 CTAs, 3 proof pills
Path cards Role-based navigation Developer, task author, operator, agent, architect
Stepper Tutorials and workflows 3–5 steps visible; details on child pages
Expandable tile Optional details Pitfalls, failure modes, caveats
Callout Warnings, notes, enterprise controls Keep under 80 words
Code card Runnable snippets Include verification command
Schema card Contract fields Input, output, validation, examples
Bento grid Homepage / hub overview 4–6 cards max
Task catalog cards Reference grouping Capability, task IDs, link to contract

Avoid

  • Long all-purpose tables.
  • Long bullet lists of links without grouping.
  • Repeated code snippets without a visible outcome.
  • Hero sections on every leaf page.