List

Styled unordered, ordered, unstyled, and description lists with spacing and divider options.

import { ... } from '@corndev/ui'

First item
Second item
Third item

Divided item A
Divided item B
Divided item C

Plan: Pro
Status: Active
Renewal: 1st of each month

HTML

No JavaScript required — these classes are the whole component.

<ul class="corn-list" data-variant="unordered" data-spacing="md">
  <li class="corn-list-item">First</li>
</ul>

Classes

Class	Description
`.corn-list`	Base list element (required on every variant)
`.corn-list-item`	List item (`<li>`)
`.corn-list-term`	Term cell in a description list (`<dt>`)
`.corn-list-detail`	Detail cell in a description list (`<dd>`)

Attributes

Attribute	Values
`data-variant`	`unordered\|ordered\|unstyled\|description`
`data-spacing`	`sm\|md\|lg`
`data-divided`	`present or absent`

Vanilla JS

Optional. createList only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createList } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createList(el, { /* options */ });

Options

Option	Type	Default	Description
`variant`	`'unordered'\|'ordered'\|'unstyled'\|'description'`	`'unordered'`	Marker style. `description` lays terms and details out as a two-column grid and expects `<dt>`/`<dd>` children carrying `.corn-list-term` and `.corn-list-detail`.
`spacing`	`'sm'\|'md'\|'lg'\|null`	`'md'`	Vertical gap between items. Applied between items, never above the first.
`divided`	`boolean`	`false`	Rule between items. Combines with any variant.

React

List, ListItem, ListTerm, ListDetail — from @corndev/ui-react.

Props

Prop	Type	Default	Description
`variant`	`'unordered'\|'ordered'\|'unstyled'\|'description'`	`'unordered'`	Marker style. `description` lays terms and details out as a two-column grid and expects `<ListTerm>`/`<ListDetail>` children.
`spacing`	`'sm'\|'md'\|'lg'\|null`	`'md'`	Vertical gap between items. Applied between items, never above the first.
`divided`	`boolean`	`false`	Rule between items. Combines with any variant.
`as`	`string`	`undefined`	Override the element. Defaults to the one the variant belongs on — `ul`, `ol` or `dl`.
`children`	`React.ReactNode`	`undefined`
`className`	`string`	`undefined`

`<ListItem>` props

a list item, carrying the class the spacing and divider rules select on

Prop	Type	Default
`children`	`React.ReactNode`	`undefined`
`className`	`string`	`undefined`

`<ListTerm>` props

the term half of a description list

Prop	Type	Default
`children`	`React.ReactNode`	`undefined`
`className`	`string`	`undefined`

`<ListDetail>` props

the detail half of a description list

Prop	Type	Default
`children`	`React.ReactNode`	`undefined`
`className`	`string`	`undefined`

Unordered

import '@corndev/ui/theme';

<ul class="corn-list" data-variant="unordered">
  <li class="corn-list-item">First item</li>
  <li class="corn-list-item">Second item</li>
  <li class="corn-list-item">Third item</li>
</ul>

Ordered

<ol class="corn-list" data-variant="ordered">
  <li class="corn-list-item">Step one</li>
  <li class="corn-list-item">Step two</li>
  <li class="corn-list-item">Step three</li>
</ol>

Unstyled

Removes bullets and left padding — useful as a base for custom list UIs.

<ul class="corn-list" data-variant="unstyled">
  <li class="corn-list-item">Item A</li>
  <li class="corn-list-item">Item B</li>
  <li class="corn-list-item">Item C</li>
</ul>

Description list

Renders a two-column term/detail grid.

<dl class="corn-list" data-variant="description">
  <dt class="corn-list-term">Plan</dt>
  <dd class="corn-list-detail">Pro</dd>

  <dt class="corn-list-term">Renewal</dt>
  <dd class="corn-list-detail">1st of each month</dd>

  <dt class="corn-list-term">Status</dt>
  <dd class="corn-list-detail">Active</dd>
</dl>

Divided

Add data-divided to any variant to draw a separator between items.

<ul class="corn-list" data-variant="unstyled" data-divided>
  <li class="corn-list-item">Item A</li>
  <li class="corn-list-item">Item B</li>
  <li class="corn-list-item">Item C</li>
</ul>

Spacing

Control vertical spacing between items.

<ul class="corn-list" data-variant="unordered" data-spacing="sm">...</ul>
<ul class="corn-list" data-variant="unordered" data-spacing="md">...</ul>
<ul class="corn-list" data-variant="unordered" data-spacing="lg">...</ul>