table properties reference documentation css table properties reference documentation css custom variables CSS custom property reference table property documentation table
Property Table
Fetch pattern JSON:
curl https://webspire.de/patterns/property-table/base.json base.html
<div class="ws-property-table overflow-x-auto rounded-xl border border-[var(--ws-property-table-border)]">
<table class="w-full text-left text-sm">
<caption class="sr-only">CSS custom property reference</caption>
<thead>
<tr class="border-b border-[var(--ws-property-table-border)] bg-[var(--ws-property-table-header-bg)]">
<th scope="col" class="px-6 py-3 font-semibold text-[var(--ws-property-table-text)]">Property</th>
<th scope="col" class="px-6 py-3 font-semibold text-[var(--ws-property-table-text)]">Default</th>
<th scope="col" class="px-6 py-3 font-semibold text-[var(--ws-property-table-text)]">Description</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-property-table-border)]">
<tr>
<td class="whitespace-nowrap px-6 py-3">
<code class="rounded bg-[var(--ws-property-table-header-bg)] px-1.5 py-0.5 text-xs font-mono text-[var(--ws-property-table-text)]">--glass-blur</code>
</td>
<td class="whitespace-nowrap px-6 py-3 text-[var(--ws-property-table-text-soft)]">
<code class="text-xs font-mono">12px</code>
</td>
<td class="px-6 py-3 text-[var(--ws-property-table-text-soft)]">Backdrop blur radius for the glass effect.</td>
</tr>
<tr>
<td class="whitespace-nowrap px-6 py-3">
<code class="rounded bg-[var(--ws-property-table-header-bg)] px-1.5 py-0.5 text-xs font-mono text-[var(--ws-property-table-text)]">--glass-opacity</code>
</td>
<td class="whitespace-nowrap px-6 py-3 text-[var(--ws-property-table-text-soft)]">
<code class="text-xs font-mono">0.15</code>
</td>
<td class="px-6 py-3 text-[var(--ws-property-table-text-soft)]">Background opacity of the glass surface.</td>
</tr>
<tr>
<td class="whitespace-nowrap px-6 py-3">
<code class="rounded bg-[var(--ws-property-table-header-bg)] px-1.5 py-0.5 text-xs font-mono text-[var(--ws-property-table-text)]">--glass-border</code>
</td>
<td class="whitespace-nowrap px-6 py-3 text-[var(--ws-property-table-text-soft)]">
<code class="text-xs font-mono">1px</code>
</td>
<td class="px-6 py-3 text-[var(--ws-property-table-text-soft)]">Border width of the glass container.</td>
</tr>
<tr>
<td class="whitespace-nowrap px-6 py-3">
<code class="rounded bg-[var(--ws-property-table-header-bg)] px-1.5 py-0.5 text-xs font-mono text-[var(--ws-property-table-text)]">--glass-radius</code>
</td>
<td class="whitespace-nowrap px-6 py-3 text-[var(--ws-property-table-text-soft)]">
<code class="text-xs font-mono">1rem</code>
</td>
<td class="px-6 py-3 text-[var(--ws-property-table-text-soft)]">Border radius of the glass container.</td>
</tr>
<tr>
<td class="whitespace-nowrap px-6 py-3">
<code class="rounded bg-[var(--ws-property-table-header-bg)] px-1.5 py-0.5 text-xs font-mono text-[var(--ws-property-table-text)]">--glass-saturation</code>
</td>
<td class="whitespace-nowrap px-6 py-3 text-[var(--ws-property-table-text-soft)]">
<code class="text-xs font-mono">1.8</code>
</td>
<td class="px-6 py-3 text-[var(--ws-property-table-text-soft)]">Backdrop saturation multiplier for vibrancy.</td>
</tr>
</tbody>
</table>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
tablepropertiesreferencedocumentationcss
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Table column headers (Property, Default, Description). |
| rows | Yes | Table rows with property name, default value, and description. |
A semantic three-column table for documenting CSS custom properties. Includes proper scope="col" attributes, a screen-reader-only caption, and monospaced code formatting for property names and values.