Description List

Components

Description List

data

static

<arc-description-list>

Overview

Guidelines

When to use

Use for structured key/value metadata such as profile details, order summaries, or spec sheets
Set `columns` to 2 or 3 for wider layouts where items are short and scannable
Pair with cards or panels for contained metadata displays
Keep term labels concise — one to three words is ideal

When not to use

Use for tabular data with many rows — use `arc-data-table` instead
Nest description lists inside each other
Use long paragraph-length terms — move verbose content to the detail slot
Mix description items with non-`arc-description-item` children

Features

ARIA list/listitem roles for assistive technology support
Responsive grid layout with configurable column count
Automatic single-column fallback below 640px
Optional horizontal and vertical dividers between items
Uppercase accent-font term labels for visual hierarchy
CSS parts: `list`, `item`, `term`, `detail` for deep customization
Follows `prefers-reduced-motion` for reduced-motion users

Preview

Arclight Platform

Active

US-West-2

4.2.1

Usage

<arc-description-list columns="2">
  <arc-description-item term="Name">Arclight Platform</arc-description-item>
  <arc-description-item term="Status">Active</arc-description-item>
  <arc-description-item term="Region">US-West-2</arc-description-item>
  <arc-description-item term="Version">4.2.1</arc-description-item>
</arc-description-list>

import { DescriptionList, DescriptionItem } from '@arclux/arc-ui-react';

<DescriptionList columns={2}>
  <DescriptionItem term="Name">Arclight Platform</DescriptionItem>
  <DescriptionItem term="Status">Active</DescriptionItem>
  <DescriptionItem term="Region">US-West-2</DescriptionItem>
  <DescriptionItem term="Version">4.2.1</DescriptionItem>
</DescriptionList>

<script setup>
import { DescriptionList, DescriptionItem } from '@arclux/arc-ui-vue';
</script>

<template>
  <DescriptionList :columns="2">
    <DescriptionItem term="Name">Arclight Platform</DescriptionItem>
    <DescriptionItem term="Status">Active</DescriptionItem>
    <DescriptionItem term="Region">US-West-2</DescriptionItem>
    <DescriptionItem term="Version">4.2.1</DescriptionItem>
  </DescriptionList>
</template>

<script>
  import { DescriptionList, DescriptionItem } from '@arclux/arc-ui-svelte';
</script>

<DescriptionList columns={2}>
  <DescriptionItem term="Name">Arclight Platform</DescriptionItem>
  <DescriptionItem term="Status">Active</DescriptionItem>
  <DescriptionItem term="Region">US-West-2</DescriptionItem>
  <DescriptionItem term="Version">4.2.1</DescriptionItem>
</DescriptionList>

import { Component } from '@angular/core';
import { DescriptionList, DescriptionItem } from '@arclux/arc-ui-angular';

@Component({
  imports: [DescriptionList, DescriptionItem],
  template: `
    <DescriptionList [columns]="2">
      <DescriptionItem term="Name">Arclight Platform</DescriptionItem>
      <DescriptionItem term="Status">Active</DescriptionItem>
      <DescriptionItem term="Region">US-West-2</DescriptionItem>
      <DescriptionItem term="Version">4.2.1</DescriptionItem>
    </DescriptionList>
  `,
})
export class MetadataComponent {}

import { DescriptionList, DescriptionItem } from '@arclux/arc-ui-solid';

<DescriptionList columns={2}>
  <DescriptionItem term="Name">Arclight Platform</DescriptionItem>
  <DescriptionItem term="Status">Active</DescriptionItem>
  <DescriptionItem term="Region">US-West-2</DescriptionItem>
  <DescriptionItem term="Version">4.2.1</DescriptionItem>
</DescriptionList>

import { DescriptionList, DescriptionItem } from '@arclux/arc-ui-preact';

<DescriptionList columns={2}>
  <DescriptionItem term="Name">Arclight Platform</DescriptionItem>
  <DescriptionItem term="Status">Active</DescriptionItem>
  <DescriptionItem term="Region">US-West-2</DescriptionItem>
  <DescriptionItem term="Version">4.2.1</DescriptionItem>
</DescriptionList>

API

Prop	Type	Default	Description
`columns`	`number`	`1`	Number of grid columns for laying out items side by side.
`dividers`	`boolean`	`true`	Show horizontal dividers between rows and vertical dividers between columns.

Description Item

<arc-description-item>

A single term/detail pair within a description list. The term is rendered as an uppercase label, and the default slot holds the detail content.

Prop	Type	Default	Description
`term`	`string`	`''`	The key or label for this description entry, displayed as an uppercase heading.
`default slot`	`slot`	—	The detail or value content for this entry.