@banastas/collection · release 0.2.1

The collection design system

One stylesheet for seven collection sites and the hub. Every colour below follows one attribute on <html>: data-channel, plus data-ink="warm" for the hub. Pick a channel to see the whole system in it.

Shelf

.chips .controls .shelf .card .badge .tag .card-note

Justified rows: each <li> sets --aspect to its cover's ratio, so posters, sleeves, trims and photos share one baseline. A card's who line, title and tags are each their own link.

206 on the shelf

    A single row

    .shelf--row →

      Filters and groups

      .collection-layout .facet-panel .filter-dialog .collection-toolbar .collection-groups

      A sticky sidebar on wide screens. Below 900px it hides and .filter-trigger opens the same groups in .filter-dialog.

      64 of 206 items

      Filters

      The same facet groups as the sidebar.

      Item page

      .crumbs .item .facts .prose .actions .module .list-num .people .steps
      ← Back to the shelfVinyl / Daft Punk / TRON: Legacy

      Soundtrack · LP · 2022

      TRON: Legacy

      Score · 2× LP, 180g, blue translucent

      by Daft Punk

      Label
      Mondo
      Cat. no.
      MOND-194
      Paid
      $35
      Value
      $79 · +$44 since purchase
      Last month
      −$6

      The prose block holds an overview or notes at reading width, in Archivo.

      Open in Discogs ↗Pick something connected

      Tracklist

      .list-num
      1. A1Overture2:28
      2. A2The Grid1:37
      3. A3The Son of Flynn1:35
      4. B1Derezzed1:44

      Credits

      .people
      • Thomas BangalterComposer
      • Guy-Manuel de Homem-ChristoComposer
      • Joseph TrapaneseOrchestrator

      Method

      .steps
      1. 01Bring a large pot of salted water to the boil.
      2. 02Whisk the eggs, yolks and cheese; season with pepper.

      Long item pages add .jumps, the sticky in-page bar at the top of this page, linking to each .module[id]. Printing an item page drops the chrome and prints black on white.

      Stats

      .kpi-grid .kpi-card .stats-split .stats-panel .bar-list
      Items
      206on the shelf
      Spent
      $6,412at purchase
      Value
      $8,930+39% since purchase
      This month
      −$120lowest asks

      Formats

      items / share
      1. LP14269%
      2. 7"4723%
      3. 10"178%

      Decades

      Filter →
      1. 1990s8843%
      2. 2020s6331%
      3. 1980s5527%

      Marks and images

      .tile .glyph · images/social · images/icons
        • Accent
        • Accent dim
        • Up
        • Down
        • Raised
        • Line

        Every channel ships a 1200×630 social card and icons at 512, 192, 180, 32 and 16px, rendered from this stylesheet by npm run images.

        States

        .empty-state .empty .section-heading .back-link

        No items match.

        Remove a filter or try a broader search.

        Clear filters