Action list

Settings-style rows: emoji tiles, two-line labels, and trailing chevrons with inset focus rings.

Widely Supported

uino-js

Quick implementation

.action-list-card { border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; }
.al-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}
.al-link:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: none; }

Prompt this to your LLM

Whole row hit target, list semantics preserved.

Implement an action list.

Classes: .action-list-demo, .action-list-card, ul.al-list with li.al-item and a.al-link.
Each row: leading square icon, title + subtitle stack, chevron.
Use role="list" on ul. Inset focus ring on links.

Return HTML + CSS.

Why this matters in 2026

Mobile settings panels still ship as link lists; consistent row height keeps thumb reach predictable.

The logic

Flex keeps icons aligned when subtitles wrap; chevron is decorative so it stays out of the accessible name.

Accessibility & performance

Prefer real links over div buttons for navigation rows; add aria-current on the active destination in your app.