DescriptionList

Stable

Key to value pairs such as account details or contract metadata, using native <dl>.

Use DescriptionList to show attributes of one thing: an organisation’s settings, a contract’s parties and dates, an integration’s configuration. Choose horizontal for detail pages, vertical for narrow panels and grid for summary headers. Every layout stacks on phones.

Source Edit docs Report an issue

Overview

Contract: MSA-2026-014
Counterparty: Northwind Ltd
Status: Signed
Effective date: 6 November 2026
Owner: Priya Raman, Legal

tsx

import { Badge, DescriptionList, DescriptionListItem } from '@bindshq/stance-react';

export function Basic() {
  return (
    <DescriptionList>
      <DescriptionListItem term="Contract">MSA-2026-014</DescriptionListItem>
      <DescriptionListItem term="Counterparty">Northwind Ltd</DescriptionListItem>
      <DescriptionListItem term="Status">
        <Badge tone="success" dot>
          Signed
        </Badge>
      </DescriptionListItem>
      <DescriptionListItem term="Effective date">6 November 2026</DescriptionListItem>
      <DescriptionListItem term="Owner">Priya Raman, Legal</DescriptionListItem>
    </DescriptionList>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Contract: MSA-2026-014
Counterparty: Northwind Ltd
Status: Signed
Effective date: 6 November 2026
Owner: Priya Raman, Legal

Light

Contract: MSA-2026-014
Counterparty: Northwind Ltd
Status: Signed
Effective date: 6 November 2026
Owner: Priya Raman, Legal

Dark

Contract: MSA-2026-014
Counterparty: Northwind Ltd
Status: Signed
Effective date: 6 November 2026
Owner: Priya Raman, Legal

High contrast

Import

tsx

import { DescriptionList, DescriptionListItem } from '@bindshq/stance-react';

Platforms

DescriptionList has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { DescriptionList, DescriptionListItem } from '@bindshq/stance-react';

Playground

Organisation: Binds Ltd
Plan: Business
Seats: 46 of 50
Renewal: 1 Feb 2027

tsx

<DescriptionList />

Examples

Grid summary

Mailboxes: 312
Templates: 24
Relay: smtp.binds.si
Last sync: 4 minutes ago

tsx

import { DescriptionList } from '@bindshq/stance-react';

export function Grid() {
  return (
    <DescriptionList
      layout="grid"
      columns={4}
      items={[
        { term: 'Mailboxes', details: '312' },
        { term: 'Templates', details: '24' },
        { term: 'Relay', details: 'smtp.binds.si' },
        { term: 'Last sync', details: '4 minutes ago' },
      ]}
    />
  );
}

Vertical

Billing contact: finance@binds.si
Billing address: 1 Canal Street, Manchester M1 3HE
VAT number: GB 123 4567 89

tsx

import { DescriptionList } from '@bindshq/stance-react';

export function Vertical() {
  return (
    <div style={{ maxWidth: 280 }}>
      <DescriptionList
        layout="vertical"
        items={[
          { term: 'Billing contact', details: 'finance@binds.si' },
          { term: 'Billing address', details: '1 Canal Street, Manchester M1 3HE' },
          { term: 'VAT number', details: 'GB 123 4567 89' },
        ]}
      />
    </div>
  );
}

API reference