Theme

Accordion

<cad-accordion>

Collapsible sections.

Alert

<cad-alert>

Status messages and actions.

Avatar

<cad-avatar>

Initials, portraits, and presence.

Doodle avatar

<cad-doodle-avatar>

Hand-drawn faces.

Badge

<cad-badge>

Short status and category labels.

Blockquote

<cad-blockquote>

Quotations with optional sources.

Bookmark

<cad-bookmark>

Save or unsave an item.

Breadcrumb

<cad-breadcrumb>

Links to parent pages.

Button

<cad-button>

Actions, form submission, and navigation.

Callout

<cad-callout>

Tips and warnings within a page.

Card

<cad-card>

Related content in one container.

Chart

<cad-chart>

Bar, line, and donut charts.

Checkbox

<cad-checkbox>

Independent on/off choices.

Checklist

<cad-checklist>

Recommendations and review results.

Code block

<cad-code-block>

Code with syntax colors and optional copying.

Divider

<cad-divider>

Lines between sections.

Drawer

<cad-drawer>

A task panel at the edge of the screen.

Empty state

<cad-empty-state>

Missing content and the next step.

Footer

<cad-footer>

Links and information at the bottom of a page.

Header

<cad-header>

Brand, navigation, and actions.

Highlight

<cad-highlight>

Marker and underline emphasis.

Icon

<cad-icon>

Hand-drawn symbols.

Input

<cad-input>

Single-line text fields.

Kanban

<cad-kanban>

Cards organized into columns.

List

<cad-list>

Bullet and numbered lists.

Link

<cad-link>

Navigation with a coral underline.

Modal

<cad-modal>

A dialog for a decision or short task.

Note

<cad-note>

Handwritten annotations and reminders.

Pagination

<cad-pagination>

Navigation between pages.

Popover

<cad-popover>

Extra information beside a trigger.

Progress

<cad-progress>

Task completion and ongoing work.

Radio

<cad-radio>

One choice from a group.

Skeleton

<cad-skeleton>

Placeholders while content loads.

Slider

<cad-slider>

Select a number or range.

Spinner

<cad-spinner>

An indicator for ongoing work.

Steps

<cad-steps>

Stages and progress in a process.

Sticker

<cad-sticker>

Decorative text labels.

Switch

<cad-switch>

Settings that take effect immediately.

Tabs

<cad-tabs>

Switch between related panels.

Table

<cad-table>

Rows and columns in a handwritten style.

Table of contents

TableOfContents.astro

Links to page sections, for Astro.

Textarea

<cad-textarea>

Multi-line text fields.

Toast

<cad-toast>

Temporary notifications, with an optional action.

Tooltip

<cad-tooltip>

Short hints on hover or focus.

Combined example

Save the plan and switch between Build and Review.BuildReviewBuild the first working version.Check the result with a keyboard and screen reader.
Back to top