Striped Property Table

Fetch pattern JSON: curl https://webspire.de/patterns/property-table/striped.json

striped.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 class="bg-[var(--ws-property-table-bg)]">
        <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 class="bg-[var(--ws-property-table-header-bg)]">
        <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 class="bg-[var(--ws-property-table-bg)]">
        <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 class="bg-[var(--ws-property-table-header-bg)]">
        <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 class="bg-[var(--ws-property-table-bg)]">
        <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

Family

property-table

Tier

enhanced

Kind

component

Extends

property-table/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

tablepropertiesstripedzebrareference

Slots

Name	Required	Description
header	Yes	Table column headers (Property, Default, Description).
rows	Yes	Table rows with alternating background colors.

Extends the base property table with alternating row backgrounds (white/slate-50 in light mode, slate-900/slate-800 in dark mode) for easier scanning of long property lists.