descriptions

Labelled key/value grid for detail pages.

Compose DescriptionsItems inside Descriptions. columns sets the grid track count; an item's span stretches it across columns.

import { Descriptions, DescriptionsItem } from '@fluixi-ui/descriptions';

<Descriptions columns={2}>
  <DescriptionsItem label="Email">[email protected]</DescriptionsItem>
  <DescriptionsItem label="Phone">+1 555 0100</DescriptionsItem>
  <DescriptionsItem label="Address" span={2}>1 Market St, San Francisco</DescriptionsItem>
</Descriptions>

Styled via the data-descriptions, data-descriptions-term and data-descriptions-detail hooks — no element semantics assumed.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples

descriptions