DescriptionList

Description lists are elements used to enclose a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Import

import { DescriptionList, DescriptionDetail, DescriptionTerm } from '@sajari-ui/core';

import { DescriptionList, DescriptionDetail, DescriptionTerm } from '@sajari-ui/core';

Usage

Editable Example

Example 1: This is what example 1 actually means.
Example 2: This is what example 2 actually means.; This is more detail on what example 2 actually means.

<DescriptionList>
  <DescriptionTerm>Example 1</DescriptionTerm>
  <DescriptionDetail>This is what example 1 actually means.</DescriptionDetail>
  <DescriptionTerm>Example 2</DescriptionTerm>
  <DescriptionDetail>This is what example 2 actually means.</DescriptionDetail>
  <DescriptionDetail>This is more detail on what example 2 actually means.</DescriptionDetail>
</DescriptionList>

<DescriptionList>
  <DescriptionTerm>Example 1</DescriptionTerm>
  <DescriptionDetail>This is what example 1 actually means.</DescriptionDetail>
  <DescriptionTerm>Example 2</DescriptionTerm>
  <DescriptionDetail>This is what example 2 actually means.</DescriptionDetail>
  <DescriptionDetail>This is more detail on what example 2 actually means.</DescriptionDetail>
</DescriptionList>

Column split

Editable Example

Example 1: This is what example 1 actually means.
Example 2: This is what example 2 actually means.

<DescriptionList columnSplit={[1, 3]}>
  <DescriptionTerm>Example 1</DescriptionTerm>
  <DescriptionDetail>This is what example 1 actually means.</DescriptionDetail>
  <DescriptionTerm>Example 2</DescriptionTerm>
  <DescriptionDetail>This is what example 2 actually means.</DescriptionDetail>
</DescriptionList>

<DescriptionList columnSplit={[1, 3]}>
  <DescriptionTerm>Example 1</DescriptionTerm>
  <DescriptionDetail>This is what example 1 actually means.</DescriptionDetail>
  <DescriptionTerm>Example 2</DescriptionTerm>
  <DescriptionDetail>This is what example 2 actually means.</DescriptionDetail>
</DescriptionList>

Props

Name	Type	Default	Description
`layout`	`'column'` or `'stack'`	`'column'`	If set to `'column'`, the description terms are in a left-side column and the details are in a right-side column. If set to `'stack'`, description terms and details are on alternating rows.
`children`	`React.ReactNode`		This prop is required. Build the description list with child `DescriptionTerm` and `DescriptionDetail` components.
`columnSplit`	`[number, number]`	`[1, 2]`	Requires `layout` to be set to `column`. Indicates the proportion of the columns. Numbers must both be between 1 and 4 (inclusive).