Basic Table

Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Davis	carol@example.com	Editor	Pending
Dave Wilson	dave@example.com	Viewer	Inactive
Eve Martinez	eve@example.com	Admin	Active


    <div class="table-container">

      <table class="table">

        <thead><tr><th>Name</th><th>Email</th></tr></thead>

        <tbody><tr><td>Alice</td><td>alice@example.com</td></tr></tbody>

      </table>

    </div>

Table Variants

Striped Table

Product	Category	Price
Widget A	Tools	$19.99
Widget B	Parts	$24.99
Widget C	Tools	$12.50
Widget D	Parts	$34.00

Hover Table

Task	Assigned To	Due Date
Design mockups	Alice	Feb 15
Write tests	Bob	Feb 18
Deploy v2.0	Carol	Feb 20
Update docs	Dave	Feb 22


    <table class="table table-striped">...</table>

    <table class="table table-hover">...</table>


    <!-- Component -->

    <what-table>

      <table>...</table>

    </what-table>

Avatars

Size Variants

XS

SM

Default

LG

XL

2XL

Initials

AJ

BS

CD

DW

Status Indicators

Online

Offline

Busy

Away

Avatar Group

+3


    <!-- Image avatar with size -->

    <img src="photo.jpg" class="avatar avatar-lg" alt="User">


    <!-- Initials avatar -->

    <div class="avatar">AJ</div>


    <!-- Status indicator -->

    <div class="avatar avatar-online">

      <img src="photo.jpg" alt="Online user">

    </div>


    <!-- Avatar group -->

    <div class="avatar-group">

      <img src="u1.jpg" class="avatar" alt="User 1">

      <img src="u2.jpg" class="avatar" alt="User 2">

      <div class="avatar">+3</div>

    </div>


    <!-- Component -->

    <what-avatar src="photo.jpg" size="lg"></what-avatar>

Empty States

No results found

Try adjusting your search or filters to find what you're looking for.


    <div class="empty-state">

      <div class="empty-state-icon">...</div>

      <h3 class="empty-state-title">No results found</h3>

      <p class="empty-state-description">Description text</p>

      <button class="btn btn-primary">Action</button>

    </div>


    <!-- Component -->

    <what-empty-state title="No results" description="Try again">

      <button class="btn btn-primary">Action</button>

    </what-empty-state>

Progress Bars

Color Variants

Primary (65%)

Success (80%)

Warning (45%)

Danger (25%)

Sizes

Small

Default

Large

Extra Large

With Labels

72%

Complete

Striped


    <div class="progress">

      <div class="progress-bar" style="width: 65%"></div>

    </div>


    <!-- With color and label -->

    <div class="progress progress-lg">

      <div class="progress-bar progress-success" style="width: 80%">

        <span class="progress-label">80%</span>

      </div>

    </div>


    <!-- Component -->

    <what-progress value="65" color="success" size="lg"></what-progress>

Spinners

Sizes

Small

Default

Large

Extra Large

Color Variants


    <div class="spinner"></div>

    <div class="spinner spinner-lg spinner-primary"></div>


    <!-- Component -->

    <what-spinner size="lg" color="primary"></what-spinner>

Skeleton Loading

Placeholder content shown while data is loading.

Individual Elements

Skeleton Card Layout


    <div class="skeleton-title"></div>

    <div class="skeleton-text"></div>

    <div class="skeleton-avatar"></div>

    <div class="skeleton-image"></div>

    <div class="skeleton-button"></div>

CSS Classes Reference

Table Classes

Class	Description
`table`	Base table styling
`table-striped`	Alternating row backgrounds
`table-hover`	Highlight rows on hover
`table-container`	Responsive scrollable wrapper

Avatar Classes

Class	Description
`avatar`	Base avatar (default size)
`avatar-xs`	Extra small avatar
`avatar-sm`	Small avatar
`avatar-lg`	Large avatar
`avatar-xl`	Extra large avatar
`avatar-2xl`	Double extra large avatar
`avatar-online`	Green status dot
`avatar-offline`	Gray status dot
`avatar-busy`	Red status dot
`avatar-away`	Yellow status dot
`avatar-group`	Overlapping avatar container

Empty State Classes

Class	Description
`empty-state`	Centered empty state container
`empty-state-icon`	Icon wrapper
`empty-state-title`	Title text
`empty-state-description`	Description text

Progress Classes

Class	Description
`progress`	Progress bar container
`progress-bar`	Fill element (set width via style)
`progress-success`	Green progress bar
`progress-warning`	Yellow progress bar
`progress-danger`	Red progress bar
`progress-sm`	Small height
`progress-lg`	Large height
`progress-xl`	Extra large height
`progress-label`	Text label inside bar
`progress-striped`	Striped pattern

Spinner Classes

Class	Description
`spinner`	Base spinner (default size)
`spinner-sm`	Small spinner
`spinner-lg`	Large spinner
`spinner-xl`	Extra large spinner
`spinner-primary`	Primary color spinner
`spinner-success`	Success color spinner
`spinner-warning`	Warning color spinner
`spinner-danger`	Danger color spinner
`spinner-info`	Info color spinner

Skeleton Classes

Class	Description
`skeleton-text`	Text line placeholder
`skeleton-title`	Title placeholder (taller)
`skeleton-avatar`	Circle placeholder for avatars
`skeleton-image`	Rectangle placeholder for images
`skeleton-button`	Button placeholder

Tables & Data Display

Basic Table

Table Variants

Striped Table

Hover Table

Avatars

Size Variants

Initials

Status Indicators

Avatar Group

Empty States

No results found

Progress Bars

Color Variants

Sizes

With Labels

Striped

Spinners

Sizes

Color Variants

Skeleton Loading

Individual Elements

Skeleton Card Layout

CSS Classes Reference

Table Classes

Avatar Classes

Empty State Classes

Progress Classes

Spinner Classes

Skeleton Classes