Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PatternsList

List

A responsive list screen with mobile cards and a semantic desktop table whose selected cells copy cleanly into spreadsheet and document tools.

<koala-table>

Record list

Composed screen

Quotes

Jane Doe 12 Birch Lane, SW1A 1AA
£1,840 2 days ago
Instructed
Priya Shah 8 Mulberry Way, BN1 4QP
£1,560 5 days ago
Accepted
Marcus Lee 27 Oak Crescent, BS8 2QR
£1,420 6 days ago
New

On desktop, select across cells and copy to paste a plain table without icons, avatars, or card styling.

Line list

Borderless one-line rows with hover-revealed actions
Contracts
Document
  • Draft contract of sale.pdf v2
    View Manage

    Standard Law Society contract, completion date left open.

    Uploaded by Priya Shah 2 days ago, 412 KB

  • TA6 property information form — 12 Birch Lane, London SW1A 1AA.pdf
    View Manage

    Seller confirms no disputes; one boundary alteration in 2019.

    Uploaded by Priya Shah 2 days ago, 1.8 MB

  • Completion statement.xlsx
    View Manage

    Balance due on completion £248,340.

    Uploaded by Priya Shah 2 days ago, 24 KB

Hover or tab into a row: the surface appears behind it and the row's controls — its actions and its expand chevron together — fade in. They keep their width while hidden, so revealing them never moves the row's columns. Below the md breakpoint, where a touch device has no hover to give, they are always visible.

Line list bleed

How far the rows reach past their text
Standard
  • Draft contract.pdf
  • Completion statement.xlsx

8px past the text each side. The default: the hover surface reads as a block behind the row.

Container
  • Draft contract.pdf
  • Completion statement.xlsx

Out to the card's own edges, for a list read as a table. Needs a px-4 host.

None
  • Draft contract.pdf
  • Completion statement.xlsx

Rules line up with the heading above them, text padded inside. Corners square off.

Line list placeholders

Rows for what the list expects and has not got
Title documents
  • Official copies of the title
  • Lease Not added yet
  • Management pack (LPE1) Not added yet

A placeholder keeps the row geometry of the real rows above it — an outline rather than a border, so no cell shifts by a pixel — and gives up the hover and focus surfaces, because there is nothing here to open.

Line list API

koala-list-lines rows-iddividersbleedsliding-highlightclass
koala-list-lines bleed StandardContainerNone
koala-list-line-header lead-classselect-all-toggleselect-all-checkedselect-all-labelbase-urlquery-paramtarget-idactive-keyclassdata-analytics
koala-list-line-header-cell sort-keydefault-descendingclass
koala-list-line expandableexpanded-varplaceholderbleedclass
koala-list-line-summary toggles-detailclass
koala-list-line-text class
koala-list-line-actions class
koala-list-line-toggle labeldata-analytics
koala-list-line-detail class