Description List Grid

Fetch pattern JSON: curl https://webspire.de/patterns/description-list/grid.json

grid.html

<section class="ws-description-list bg-[var(--ws-description-list-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-description-list-label)]">Specifications</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-description-list-text)] sm:text-4xl">Technical Details</h2>
    </div>
    <dl class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <div class="rounded-lg border border-[var(--ws-description-list-border)] bg-[var(--ws-description-list-bg)] p-6">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">Language</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">TypeScript 5.4</dd>
      </div>
      <div class="rounded-lg border border-[var(--ws-description-list-border)] bg-[var(--ws-description-list-bg)] p-6">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">Runtime</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">Cloudflare Workers</dd>
      </div>
      <div class="rounded-lg border border-[var(--ws-description-list-border)] bg-[var(--ws-description-list-bg)] p-6">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">Build Tool</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">Vite 6</dd>
      </div>
      <div class="rounded-lg border border-[var(--ws-description-list-border)] bg-[var(--ws-description-list-bg)] p-6">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">CSS Engine</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">Tailwind v4</dd>
      </div>
      <div class="rounded-lg border border-[var(--ws-description-list-border)] bg-[var(--ws-description-list-bg)] p-6">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">Package Manager</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">pnpm 9</dd>
      </div>
      <div class="rounded-lg border border-[var(--ws-description-list-border)] bg-[var(--ws-description-list-bg)] p-6">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">Linter</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">Biome</dd>
      </div>
    </dl>
  </div>
</section>

Details

Family

description-list

Tier

enhanced

Kind

component

Extends

description-list/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

description-listdlgridthree-columnspecificationsmetadata

Slots

Name	Required	Description
heading	No	Section title and subtitle.
items	Yes	Array of term/detail pairs rendered in a three-column grid.

Enhanced three-column variant of the description list base. Fits more items on screen with responsive breakpoints: 3 columns on large, 2 on medium, 1 on small.