Jump To:

  1. Demos
    1. Basic Data List
    2. Flanked Layout (Prefixed + Suffixed)
    3. Interactive Clickable Rows
    4. Custom Grid with Spanning
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

A highly flexible, responsive list layout designed for displaying self-explanatory or loosely structured data without relying on rigid table markup. On large screens, it perfectly aligns item content into distinct columns using CSS Subgrid, while seamlessly adapting to a clean, stacked flex view on smaller devices. Because it is fundamentally a list and not a data table, content within should be comprehensible when stacked without relying on explicit column headers. It handles complex structures through nested groupings, supports optional visual headers, and provides interactive states for clickable rows using simple presets or custom grids.

Demos

Basic Data List

A standard list layout for simple items.

  • Item One Title
  • Item Two Title
HTML 
<ul class="data-list">
  <li class="data-list__item">
    <div class="data-list__column">
      <strong>Item One Title</strong>
    </div>
  </li>
  <li class="data-list__item">
    <div class="data-list__column">
      <strong>Item Two Title</strong>
    </div>
  </li>
</ul>

Flanked Layout (Prefixed + Suffixed)

Automatically aligns an icon at the start and an action at the end.

  • Report_Q1.pdf
  • Analytics_Data.xlsx
HTML 
<ul class="data-list data-list--prefixed data-list--suffixed">
  <li class="data-list__item">
    <div class="data-list__column" aria-hidden="true">📄</div>
    <div class="data-list__column"><strong>Report_Q1.pdf</strong></div>
    <div class="data-list__column"><button class="button button--small">Download</button></div>
  </li>
  <li class="data-list__item">
    <div class="data-list__column" aria-hidden="true">📊</div>
    <div class="data-list__column"><strong>Analytics_Data.xlsx</strong></div>
    <div class="data-list__column"><button class="button button--small">Download</button></div>
  </li>
</ul>

Interactive Clickable Rows

Entire rows are interactive, using proxy-click logic to route to a primary link.

HTML 
<ul class="data-list data-list--clickable">
  <li class="data-list__item" data-ulu-proxy-click>
    <div class="data-list__column">
      <a href="#" data-ulu-proxy-click-source><strong>Important Update: New Security Features</strong></a>
    </div>
    <div class="data-list__column type-small">2 hours ago</div>
  </li>
  <li class="data-list__item" data-ulu-proxy-click>
    <div class="data-list__column">
      <a href="#" data-ulu-proxy-click-source><strong>Your Weekly Activity Summary</strong></a>
    </div>
    <div class="data-list__column type-small">Yesterday</div>
  </li>
</ul>

Custom Grid with Spanning

Advanced usage using inline variables and column spanning.

  • ID: 101
    Product Name A In Stock
    $19.99
HTML 
<ul class="data-list" style="--ulu-data-list-columns: auto 1fr auto auto;">
  <li class="data-list__item">
    <div class="data-list__column">ID: 101</div>
    <div class="data-list__column data-list__column--span-2">
      <strong>Product Name A</strong>
      <span class="type-small">In Stock</span>
    </div>
    <div class="data-list__column">$19.99</div>
  </li>
</ul>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "grid-template-columns": 1fr,
  "grid-template-columns-stacked": 100%,
  "row-gap": 0,
  "column-gap": 1rem,
  "column-gap-stacked": 0.5rem,
  "group-gap-stacked": 0.25rem,
  "padding": 1rem clamp(0.65rem, 3vw, 1.5rem),
  "overlap-borders": true,
  "border-width": 1px,
  "border-color": "rule-light",
  "border-radius": null,
  "box-shadow": null,
  "background-color": transparent,
  "background-color-even": #f9f9f9,
  "background-color-hover": #f0f0f0,
  "clickable-background-color-hover": #e8e8e8, // Slightly darker for interactive indication
  "clickable-border-color-hover": "control-border-hover",
  "stacked-breakpoint": true,
  "span-count" : 6,
  "header-font-weight": bold,
  "header-border-bottom-width": 2px,
  "header-border-bottom-color": "rule",
);
File Information
  • File: _data-list.scss
  • Group: data-list
  • Type: variable
  • Lines (comments): 34-57
  • Lines (code): 59-82

Map Properties

Name Type Default Description
grid-template-columns String 1fr The default master grid columns.
grid-template-columns-stacked String 100% The stacked grid columns (default is single column stack).
row-gap Dimension 0 The space between list items (rows). Forced to 0 if overlap-borders is true.
column-gap Dimension 1rem The space between columns.
column-gap-stacked Dimension 0.5rem The space between stacked elements when stacked within an item.
group-gap-stacked Dimension 0.25rem The space between stacked elements inside a nested column when stacked.
padding Dimension 1rem clamp(0.65rem, 3vw, 1.5rem), The padding inside list items.
overlap-borders Boolean true If true, applies a negative top margin to items to prevent double-thick borders between touching rows, and forces row-gap to 0.
border-width Dimension 1px The border width for the list items.
border-color String "rule-light" The border color key for the list items.
border-radius Dimension null The border radius for the list items.
box-shadow CssValue null The box shadow for the list items.
background-color Color transparent The default background color for items.
background-color-even Color null The background color for even-numbered items (for striping).
background-color-hover Color null The background color for items on hover.
clickable-background-color-hover Color #e8e8e8 The background color for clickable items on hover.
clickable-border-color-hover String "control-border-hover" The border color for interactive (clickable) items on hover/focus.
stacked-breakpoint String true The breakpoint below which groups stack. Defaults to the global default breakpoint via function fallback.
span-count Number 4 The number of span modifiers to create, increase if needed, (ie. data-list__column--span-2, --span-3, ...)
header-font-weight CssValue bold The font weight for the header row text.
header-border-bottom-width Dimension 2px The width for the bottom border of the header row.
header-border-bottom-color String "rule" The color key for the bottom border of the header row.

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _data-list.scss
  • Group: data-list
  • Type: mixin
  • Lines (comments): 84-85
  • Lines (code): 86-88

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _data-list.scss
  • Group: data-list
  • Type: mixin
  • Lines (comments): 97-98
  • Lines (code): 99-270

Demo

View

Require

Functions

get()

Function

Get a config option

File Information
  • File: _data-list.scss
  • Group: data-list
  • Type: function
  • Lines (comments): 90-91
  • Lines (code): 92-95

Parameters

Name Type Description
$name Map Name of property

Require