Layout & content

The structural and display bricks — the bones and text of most pages.

Layout

• Stack — a flex container (vertical or horizontal) with gap and alignment. The workhorse layout.
• Grid — a responsive column grid.
• Section — a titled section with optional heading/description and a background.
• Card — a bordered surface with a title, body, and footer.
• Box — a neutral grouping container (and the unit you save as a cookbook).
• Divider — a horizontal rule with an optional label.

Content

• Heading / Text — titles and body copy.
• Image — a fitted image (cover/contain, common aspect ratios).
• Markdown — rendered GitHub-flavored markdown.
• Badge — a status pill (default / success / warning / danger).
• List — ordered or unordered.
• Table — a simple header + rows table. For large, sortable, data-bound tables use DataGrid in Charts & visualizations.
• Avatar — a circular image or initials.
• Tabs — tabbed panels, one child composition per tab.
• Screens — multi-screen flows (one child composition per screen) for app-like, multi-view layouts.
• MasterDetail — a list + detail pane: select an item on the left, see it on the right.
• Timeline, Quote, KeyValue — events, pull quotes, and detail lists.

Feedback

• Alert — an info / success / warning / danger callout banner.
• ProgressBar — a 0–100% progress indicator.

Next steps

• Forms & inputs
• Charts & visualizations