Description

Label–value pairs for metadata and detail views.

Default

Version: 1.216
License: SIL OFL 1.1
Glyphs: 4,857
Axes: wght · slnt

<dl class="grid grid-cols-2 gap-x-8 gap-y-4">
  <div>
    <dt class="text-xs uppercase text-text-tertiary">Version</dt>
    <dd class="mt-1 text-sm text-text-primary">1.216</dd>
  </div>
  …
</dl>

Alignment & truncation

Author: mott
Summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Text right pins the value to the trailing edge; Ellipsis truncates long content (full text stays in the title tooltip).

{/* Text right */}
<div class="flex items-baseline justify-between gap-4">
  <dt>Author</dt>
  <dd class="text-right">mott</dd>
</div>

{/* Ellipsis */}
<div class="flex items-baseline justify-between gap-4">
  <dt class="shrink-0">Summary</dt>
  <dd class="truncate" title="Lorem ipsum dolor sit amet…">Lorem ipsum dolor sit amet…</dd>
</div>

Markdown for agents: /design/description.md · spec: /design.md