DataList

Label and value pairs, such as the details of a file.

Status: Published
Created by: Maya Janssens
Path: /products/linen-shirt

DataList.tsx

import {
  Badge,
  DataList,
  DataListItem,
  DataListLabel,
  DataListValue
} from 'alinea/components'

export function DataListExample() {
  return (
    <DataList aria-label="Entry details" style={{width: 300}}>
      <DataListItem>
        <DataListLabel>Status</DataListLabel>
        <DataListValue>
          <Badge size="sm" status="published">
            Published
          </Badge>
        </DataListValue>
      </DataListItem>
      <DataListItem>
        <DataListLabel>Created by</DataListLabel>
        <DataListValue>Maya Janssens</DataListValue>
      </DataListItem>
      <DataListItem>
        <DataListLabel>Path</DataListLabel>
        <DataListValue>/products/linen-shirt</DataListValue>
      </DataListItem>
    </DataList>
  )
}

Props

`<DataList>`

A description list of DataListItems with a label and a value

PropTypeDefaultDescription

orientationOrientationDefault 'horizontal'horizontal lines labels up in a column next to their values, vertical stacks each label above its value and flows the items into as many columns as fit

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<DataListItem>`

PropTypeDefaultDescription

fullbooleanDefault –Spans every column of a vertical list

Also accepts className and style and data-* attributes.

`<DataListLabel>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style and data-* attributes.

`<DataListValue>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style and data-* attributes.