Data Display
Components for presenting data: cards, tables, avatars, stats, lists, accordions, tabs, and more.
Card
Cards group related content and actions.
This is the body of the card. It can contain
text, images, or other content.
Cards can contain badges, lists, or custom
layouts in any section.
<div class="kds-card">
<div class="kds-card__header">
<h3 class="kds-h5">Card Title</h3>
</div>
<div class="kds-card__body">
<p class="kds-text-sm kds-text-muted">Content here.</p>
</div>
<div class="kds-card__footer">
<button class="kds-btn kds-btn--outline kds-btn--sm">Action</button>
</div>
</div>
Table
Data tables display structured data in rows and columns with optional striping and
hover states.
| Alice |
Designer |
Active
|
|
| Bob |
Developer |
Away
|
|
| Charlie |
Manager |
Offline |
|
<table class="kds-table kds-table--striped kds-table--hover">
<thead>
<tr>
<th class="kds-table__header">Name</th>
<th class="kds-table__header">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td class="kds-table__cell">Alice</td>
<td class="kds-table__cell">Designer</td>
</tr>
</tbody>
</table>
Avatar
Avatars represent users or entities with initials. Available in 5 sizes.
Sizes
<div class="kds-avatar kds-avatar--md">
<span class="kds-avatar__initials">MD</span>
</div>
<!-- Sizes: --xs | --sm | --md | --lg | --xl -->
Avatar Group
<div class="kds-avatar-group">
<div class="kds-avatar kds-avatar--md"><span
class="kds-avatar__initials">AB</span></div>
<div class="kds-avatar kds-avatar--md"><span
class="kds-avatar__initials">CD</span></div>
<div class="kds-avatar kds-avatar--md kds-avatar--overflow"><span
class="kds-avatar__initials">+3</span></div>
</div>
Stats
Stat components display key metrics with optional trend indicators.
Revenue
$12,340
↑ 12.5%
Users
1,024
↑ 3.2%
Bounce Rate
38%
↓ 5.1%
<div class="kds-stat">
<span class="kds-stat__label">Revenue</span>
<span class="kds-stat__value">$12,340</span>
<span class="kds-stat__delta kds-stat__delta--up">↑ 12.5%</span>
</div>
<!-- Delta direction: kds-stat__delta--up | kds-stat__delta--down -->
Divider
Visual separators for sections and content blocks.
Content above solid divider
Content above dashed divider
Content above text divider
OR
Content below text divider
<hr class="kds-divider" />
<hr class="kds-divider kds-divider--dashed" />
<div class="kds-text-divider"><span>OR</span></div>
Accordion
Expandable sections that hide and reveal content on demand.
Kuarls DS is a modular, AI-ready design
system built with vanilla HTML, CSS, and JavaScript.
No. Kuarls DS is zero-build. Just include
the CSS files and use the class names.
Absolutely. Since it's pure CSS with
semantic class names, it works in any framework.
<div class="kds-accordion">
<div class="kds-accordion__item kds-accordion__item--open">
<button class="kds-accordion__trigger" aria-expanded="true">
<span class="kds-accordion__title">Question?</span>
<span class="kds-accordion__icon">▾</span>
</button>
<div class="kds-accordion__panel">
<div class="kds-accordion__content">Answer text.</div>
</div>
</div>
</div>
<!-- Toggle: add/remove kds-accordion__item--open -->
Tabs
Tab navigation for switching between related views. Available in line and enclosed
styles.
Line Tabs
This is the overview tab content.
Features tab content goes here.
Technical specifications listed here.
<div class="kds-tabs kds-tabs--line" role="tablist">
<button class="kds-tabs__tab kds-tabs__tab--active" role="tab">Overview</button>
<button class="kds-tabs__tab" role="tab">Features</button>
</div>
<div class="kds-tabs__panel kds-tabs__panel--active" role="tabpanel">
<p>Tab content.</p>
</div>
<!-- Styles: kds-tabs--line | kds-tabs--enclosed -->
Enclosed Tabs
Design guidelines for this component.
Code examples and snippets.
Best practices for using this component.
<div class="kds-tabs kds-tabs--enclosed" role="tablist">
<button class="kds-tabs__tab kds-tabs__tab--active" role="tab">Design</button>
<button class="kds-tabs__tab" role="tab">Code</button>
</div>
List
Styled lists for unordered, ordered, and icon-prefixed content.
Unordered
- Item one
- Item two
- Item three
Ordered
- First step
- Second step
- Third step
With Icons
- ✓ Done
- ⏳ Pending
- ✕ Failed
<ul class="kds-list">
<li class="kds-list__item">Item one</li>
</ul>
<ol class="kds-list kds-list--ordered">
<li class="kds-list__item">First step</li>
</ol>
<ul class="kds-list kds-list--icon">
<li class="kds-list__item"><span class="kds-list__icon">✓</span>
Done</li>
</ul>
Tile
Tiles are interactive surfaces: clickable, selectable, or expandable.
<!-- Clickable -->
<a href="#" class="kds-tile kds-tile--clickable">
<span class="kds-tile__icon">📊</span>
<span class="kds-tile__title">Analytics</span>
</a>
<!-- Selectable -->
<label class="kds-tile kds-tile--selectable">
<input type="checkbox" class="kds-tile__input" hidden />
<span class="kds-tile__title">Design</span>
</label>
<!-- Expandable -->
<div class="kds-tile kds-tile--expandable">
<span class="kds-tile__title">Settings</span>
<div class="kds-tile__expandable-content">…</div>
</div>
Content Switcher
Toggle between two or more content areas using a segmented control.
<div class="kds-content-switcher" role="radiogroup">
<button class="kds-content-switcher__btn kds-content-switcher__btn--active"
role="radio">
<span>📋</span> List
</button>
<button class="kds-content-switcher__btn" role="radio">
<span>📊</span> Grid
</button>
</div>