Avatar
Placeholder (no image)
A
BK
CL
DM
EN
This is a paragraph.
Inline usage: Notifications 3 and status Active badges.
Horizontal flex with 1rem gap. No default
alignment — state it. Different words per axis, so the two "centers"
never collide: vertical (align-items)
.top / .middle /
.bottom; horizontal
(justify-content) .start /
.center / .end /
.between.
.top / .middle / .bottom.center / .between / .end.row.middle.between
Label/value metadata (<dl>). Wrap each
<dt><dd> pair in a
<div>; pick a layout modifier.
Colour is not baked in — add .text-muted to
the <dt> (muted label, the common case)
or to the <dd> (muted value) as needed.
.vertical — label above value.horizontal — side by side.between — value pushed to the end
Black label, muted value — <dd class="text-muted">:
Bold label, regular value — both black, wrap the label in
<strong>:
Regular label, bold value — wrap the
<dd> in <strong>:
Vertical — bold label above regular value:
| Name | Role |
|---|---|
| Alice | Admin |
| Bob | Editor |
| Name | Category | Status |
|---|---|---|
| Item One Longer Name | Category A | Active |
| Item Two | Category B | Pending |
| Item Three Medium | Category A | Inactive |
| # | Product | Description | Qty | Price | Total | Status |
|---|---|---|---|---|---|---|
| 1 | Premium Wireless Headphones | Noise-cancelling, 40hr battery, Bluetooth 5.3 | 2 | $149.99 | $299.98 | In Stock |
| 2 | USB-C Hub | 7-in-1, 4K HDMI, SD card | 1 | $59.00 | $59.00 | In Stock |
| 3 | Mechanical Keyboard | Cherry MX Brown, RGB backlit, full-size aluminum frame | 1 | $189.00 | $189.00 | Low Stock |
| 4 | Monitor Stand | Adjustable height, cable management | 3 | $34.50 | $103.50 | Out of Stock |
| 5 | Webcam HD | 1080p, autofocus, built-in mic | 2 | $79.99 | $159.98 | In Stock |
| Select | User | Role | Active | Actions | |
|---|---|---|---|---|---|
| Sarah Connor | sarah@example.com | ||||
| John Doe | john.doe@company.org | ||||
| Maria Garcia | m.garcia@mail.com |
| Name | Location | Project | Last Active | Revenue | Status | ||
|---|---|---|---|---|---|---|---|
|
|
Anna Lee | anna@example.com | 123 Main Street San Francisco, CA 94102 |
Dashboard Redesign | 2 hours ago | $12,450.00 | Active |
|
|
Mark Chen | mark.chen@company.org | 456 Oak Avenue, Apt 12B New York, NY 10001 |
API Integration | 3 days ago | $8,200.00 | Away |
|
SM
|
Sara Müller | s.muller@mail.de | — | — | Never | — | Inactive |
|
|
James Wright | j.wright@startup.io | 789 Pine Road Austin, TX 73301 |
Mobile App v2 | Just now | $23,100.50 | Active |
| # | Task | Assignee | Due Date | Priority | Actions |
|---|---|---|---|---|---|
| 1 | |||||
| 2 | |||||
| 3 |
Content above divider.
Content below divider.
This is a blockquote for highlighting important text, quotes, or callouts. It uses a left border for visual emphasis.
Inline code: use font-family: monospace for
code elements.
// Code block example
function greet(name) {
return "Hello, " + name;
}
greet("World");
Disclosure content revealed after clicking summary. Hidden by default.
Disclosure content visible on load. Can be collapsed by clicking summary.
First paragraph of disclosure content with more detail.
Second paragraph showing that disclosure can contain multiple elements and longer text blocks.
Answer to first question in FAQ-style disclosure group.
Answer to second question with more detail in the response.
Answer to third question in FAQ-style disclosure group.
This is a card description.