List

Stable

Flexible list component for displaying key-value information in horizontal rows with configurable spacing.

API Reference

Components

Component	Description	Type	Default
`c-list`	Main container with vertical flex layout	—	`—`
`c-list.item`	Individual row with horizontal grid layout. Accepts a `spacing` prop.	—	`—`

c-list.item Attributes

Attribute	Description	Type	Default
`spacing`	Vertical padding of each row	string	`"compact"`

Spacing Values

Value	Description	CSS	Use
`compact`	Minimal vertical spacing — ideal for dashboard cards and dense layouts	`py-0.5`	default
`standard`	Balanced spacing for general use	`py-1`	general
`spacious`	Generous spacing for detailed or comfortable views	`py-2`	detail

Helper Classes

Class	Description
`list-col-grow`	Makes a direct child fill the remaining horizontal space (typically applied to the label column)
`list-col-wrap`	Forces a direct child to wrap to the next line

Semantic structure: c-list renders a <div> with flex layout, not a semantic <dl>. For key-value data where the relationship is meaningful, consider using a native <dl>/<dt>/<dd> structure instead.

Color-only states: when using color classes like text-error or text-warning to communicate status, pair them with a text label or icon so users who cannot perceive color still get the information.

Examples

Usage


<c-list>
  <c-list.item>
    <div class="list-col-grow text-sm">Name</div>
    <div>John Doe</div>
  </c-list.item>
</c-list>

Basic Usage

User Information

Name

John Doe
Email

john@example.com
Status

Active

<c-list>
  <c-list.item>
    <div class="list-col-grow text-sm">Name</div>
    <div>John Doe</div>
  </c-list.item>
  <c-list.item>
    <div class="list-col-grow text-sm">Status</div>
    <div><c-badge color="success" size="sm">Active</c-badge></div>
  </c-list.item>
</c-list>

Spacing Variants

Compact

Item 1

Value
Item 2

Value
Item 3

Value

Standard

Item 1

Value
Item 2

Value
Item 3

Value

Spacious

Item 1

Value
Item 2

Value
Item 3

Value

<c-list.item spacing="compact">...</c-list.item>
<c-list.item spacing="standard">...</c-list.item>
<c-list.item spacing="spacious">...</c-list.item>

With Conditional Styling

Findings Summary

Total Findings

42
Active

15
Critical

3
Resolved

27

<c-list.item>
  <div class="list-col-grow text-sm">Active</div>
  <div class="text-warning">15</div>
</c-list.item>
<c-list.item>
  <div class="list-col-grow text-sm">Critical</div>
  <div class="text-error font-semibold">3</div>
</c-list.item>

Multiple Columns

Vessel Status

Vessel A

Excellent

4.8
Vessel B

Good

3.7
Vessel C

Fair

2.4

<c-list.item>
  <div class="text-sm">Vessel A</div>
  <div class="list-col-grow text-center">
    <c-badge color="success">Excellent</c-badge>
  </div>
  <div class="text-right">4.8</div>
</c-list.item>