Ivaldi | ui | DescriptionList

Anatomy

<DescriptionList.Root>
  <DescriptionList.Item>
    <DescriptionList.Label />
    <DescriptionList.Value />
  </DescriptionList.Item>
</DescriptionList.Root>

<DescriptionList.Root orientation="vertical">
  <DescriptionList.Item>
    <DescriptionList.Label />
    <DescriptionList.Value />
  </DescriptionList.Item>
</DescriptionList.Root>

Usage

import { DescriptionList } from '@ivaldi/ui'

<DescriptionList.Root>
  <DescriptionList.Item>
    <DescriptionList.Label>Full Name</DescriptionList.Label>
    <DescriptionList.Value>John Doe</DescriptionList.Value>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Label>Email Address</DescriptionList.Label>
    <DescriptionList.Value>john@example.com</DescriptionList.Value>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Label>Role</DescriptionList.Label>
    <DescriptionList.Value>Administrator</DescriptionList.Value>
  </DescriptionList.Item>
</DescriptionList.Root>

Vertical Orientation

<DescriptionList.Root orientation="vertical" gap="sm">
  <DescriptionList.Item>
    <DescriptionList.Label>Product</DescriptionList.Label>
    <DescriptionList.Value>Professional Plan</DescriptionList.Value>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Label>Price</DescriptionList.Label>
    <DescriptionList.Value>$99/month</DescriptionList.Value>
  </DescriptionList.Item>
</DescriptionList.Root>

Different Text Sizes

<DescriptionList.Root size="lg">
  <DescriptionList.Item>
    <DescriptionList.Label>Company</DescriptionList.Label>
    <DescriptionList.Value>Acme Inc</DescriptionList.Value>
  </DescriptionList.Item>
</DescriptionList.Root>

Custom Colors

<DescriptionList.Root>
  <DescriptionList.Item>
    <DescriptionList.Label color="primary">Status</DescriptionList.Label>
    <DescriptionList.Value color="success">Active</DescriptionList.Value>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Label color="primary">Plan</DescriptionList.Label>
    <DescriptionList.Value color="warning">Trial</DescriptionList.Value>
  </DescriptionList.Item>
</DescriptionList.Root>

Different Gap Sizes

<DescriptionList.Root gap="lg">
  <DescriptionList.Item>
    <DescriptionList.Label>Created</DescriptionList.Label>
    <DescriptionList.Value>Jan 1, 2024</DescriptionList.Value>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Label>Modified</DescriptionList.Label>
    <DescriptionList.Value>Jan 15, 2024</DescriptionList.Value>
  </DescriptionList.Item>
</DescriptionList.Root>

DescriptionList.Root Props

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

DescriptionList.Item Props

Prop	Type	Default

DescriptionList.Label Props

Prop	Type	Default

DescriptionList.Value Props

Prop	Type	Default