Description List Inline

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

inline.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)]">Quick facts</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-description-list-text)] sm:text-4xl">At a Glance</h2>
    </div>
    <dl class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 rounded-lg border border-[var(--ws-description-list-border)] bg-[var(--ws-description-list-bg)] px-8 py-6">
      <div class="flex items-baseline gap-2">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">Version</dt>
        <dd class="text-base font-medium text-[var(--ws-description-list-text)]">2.4.1</dd>
      </div>
      <div class="hidden h-6 w-px bg-[var(--ws-description-list-border)] sm:block" aria-hidden="true"></div>
      <div class="flex items-baseline gap-2">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">License</dt>
        <dd class="text-base font-medium text-[var(--ws-description-list-text)]">MIT</dd>
      </div>
      <div class="hidden h-6 w-px bg-[var(--ws-description-list-border)] sm:block" aria-hidden="true"></div>
      <div class="flex items-baseline gap-2">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">Size</dt>
        <dd class="text-base font-medium text-[var(--ws-description-list-text)]">4.2 KB</dd>
      </div>
      <div class="hidden h-6 w-px bg-[var(--ws-description-list-border)] sm:block" aria-hidden="true"></div>
      <div class="flex items-baseline gap-2">
        <dt class="text-sm font-semibold text-[var(--ws-description-list-label)]">Updated</dt>
        <dd class="text-base font-medium text-[var(--ws-description-list-text)]">Mar 2026</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-listdlinlinehorizontalcompactmetadata-bar

Slots

Name	Required	Description
heading	No	Section title and subtitle.
items	Yes	Horizontal term/detail pairs with dividers between them.

Compact inline variant that renders term/detail pairs horizontally in a single row with vertical dividers. Wraps gracefully on smaller screens.