ListGroup

Live demo

Bench press4 × 8 · 80 kg
Incline pressUpper chest3 × 10 · 26 kg
Settings

How to use it

Grouped rows on a raised panel: settings, exercises, recent items. Use ListGroup.Row for each row.

Row props: title, description, meta (right-aligned, tabular), leading (icon or avatar), trailing, and onClick or href to make it actionable with a chevron.
Rows are at least 44px tall; separators are the theme's hairline (2px ink on Enamel).
Paper draws rows as ruled lines with no panel.

Don't: put buttons inside rows that are also clickable, or mix actionable and static rows without a visual cue.

In every theme

Follows the mode picked in the header.

Graphite

Bench press4 × 8 · 80 kg
Cable fly3 × 12 · 18 kg

Glass

Bench press4 × 8 · 80 kg
Cable fly3 × 12 · 18 kg

Paper

Bench press4 × 8 · 80 kg
Cable fly3 × 12 · 18 kg

Mineral

Bench press4 × 8 · 80 kg
Cable fly3 × 12 · 18 kg

Enamel

Bench press4 × 8 · 80 kg
Cable fly3 × 12 · 18 kg

Ember

Bench press4 × 8 · 80 kg
Cable fly3 × 12 · 18 kg

Code

React

import { ListGroup } from 'enma/react';

<ListGroup>
  <ListGroup.Row title="Bench press" meta="4 × 8 · 80 kg" />
  <ListGroup.Row title="Incline press" description="Upper chest" meta="3 × 10 · 26 kg" />
  <ListGroup.Row title="Settings" href="/settings" />
</ListGroup>

Plain HTML

<ul class="e-list e-sq">
  <li><div class="e-list__row"><span class="e-list__text"><span>Bench press</span></span><span class="e-list__meta">4 × 8 · 80 kg</span></div></li>
  <li><a class="e-list__row e-list__row--action" href="/settings"><span class="e-list__text"><span>Settings</span></span></a></li>
</ul>

Props

`ListGroupProps`

Also accepts every attribute of React.HTMLAttributes<HTMLUListElement>.

Props of ListGroupProps
Prop	Type	Default	Description
`children`	React.ReactNode

`ListRowProps`

Also accepts every attribute of Omit<React.HTMLAttributes<HTMLElement>, 'title'>.

Props of ListRowProps
Prop	Type	Default	Description
`title`	React.ReactNode
`description`	React.ReactNode
`meta`	React.ReactNode
`leading`	React.ReactNode
`trailing`	React.ReactNode
`href`	string