Layout Components

Components for structuring and organizing page content. Use these to create consistent and well-organized layouts.

Card

Container component for grouping related content.

Documentation

Cards are versatile containers that group related information. They include header, content, and footer sections. Perfect for organizing content hierarchically.

Card 1

Content here

Card 2

Section 1

Content

Section 2

Content

Panel

Kaeyros

Expanded panel

A simple titled container with optional toggle button.

User profile

Group related content under a labelled header. The toggle button collapses the body.

Ideal for sectioning forms, settings, or summary cards.

Collapsed by default

Use defaultCollapsed for advanced or rarely-used sections.

Advanced settings

Splitter

Kaeyros

Horizontal splitter

Two resizable panels separated by a draggable gutter.

Sidebar

Drag the gutter to resize this panel. Minimum size is 20%.

Main content

The right panel takes the remaining space. Try dragging the divider between the two.

KaeyrosAccordion

Accordion with severity tints + multiple expanded

Smooth height-grid animation, optional icons, severity-tinted left bar, and multiple-expanded mode.

Content rendered with smooth grid-template-rows animation.

Use severity to tint a left bar and pick the matching icon.

Great for highlighting items that need attention.

For destructive or critical-impact accordions.

This row cannot be toggled.

KaeyrosToolbar

Toolbar with start / center / end slots

A flexible header bar with three named slots. Use it as a section header, editor toolbar, or page chrome.