Skip to content
Qirava lowercase logo

Quill docs

List

A native ul/ol of rows, each with an optional leading slot (an icon or avatar) and main content. Using the native list element means list semantics come for free. Its axes are the kind (unordered or ordered) and the row size.

Preview#

Native ul/ol rows, each with an optional leading slot — the kind and size axes.

kind
  • Authenticate the request
  • Authorize against the grant
  • Plan and execute the query
  1. Authenticate the request
  2. Authorize against the grant
  3. Plan and execute the query
size
  • Authenticate the request
  • Authorize against the grant
  • Plan and execute the query
  • Authenticate the request
  • Authorize against the grant
  • Plan and execute the query
  • Authenticate the request
  • Authorize against the grant
  • Plan and execute the query

Playground#

Change the controls — the preview and the snippet update live.

  • Authenticate the request
  • Authorize against the grant
  • Plan and execute the query
  • Authenticate the request
  • Authorize against the grant
  • Plan and execute the query
  • Authenticate the request
  • Authorize against the grant
  • Plan and execute the query
  1. Authenticate the request
  2. Authorize against the grant
  3. Plan and execute the query
  1. Authenticate the request
  2. Authorize against the grant
  3. Plan and execute the query
  1. Authenticate the request
  2. Authorize against the grant
  3. Plan and execute the query
Kind
Size
Rows
List::new() // or List::ordered()
    .size(Size::Md)
    .item(ListItem::new(text("Authenticate the request")))
    .item(ListItem::new(text("Authorize against the grant")))
    .item(ListItem::new(text("Plan and execute the query")))
    .render()

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

  • Authenticate the request
  • Authorize against the grant
  • Plan and execute the query
Density
Radius
Surface
Motion
// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        List::new()
            .size(Size::Md)
            .item(ListItem::new(text("Authenticate the request")))
            .item(ListItem::new(text("Authorize against the grant")))
            .render()
    )

Code#

Construct the component with its builder:

List::new() // or List::ordered() for a numbered list
    .size(Size::Md)
    .item(ListItem::new(text("Authenticate the request")))
    .item(ListItem::new(text("Authorize against the grant")))
    .item(ListItem::new(text("Plan and execute the query")))
    .render()