Description List Base

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

base.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)]">Overview</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-description-list-text)] sm:text-4xl">Project Details</h2>
    </div>
    <dl class="mt-12 grid gap-6 sm:grid-cols-2">
      <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)]">Framework</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">Astro v6 with 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)]">License</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">MIT — free for personal and commercial use</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)]">Bundle Size</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">Zero runtime — copy-paste only</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)]">Browser Support</dt>
        <dd class="mt-2 text-lg font-medium text-[var(--ws-description-list-text)]">All modern browsers (Baseline 2024)</dd>
      </div>
    </dl>
  </div>
</section>

Details

Family

description-list

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

description-listdldefinitionmetadatadetailssemantic

Slots

Name	Required	Description
heading	No	Section title and subtitle.
items	Yes	Array of term/detail pairs rendered as dl items.

Semantic description list rendered as a responsive two-column grid of bordered cards. Each card pairs a term with its detail using proper <dl>, <dt>, and <dd> elements for accessibility and SEO.