Overflow
The Overflow engine automatically lays out items into up to N columns and adds an “and X more” label when content exceeds the available height. It also applies text clamping per-column width and handles grouped headers without leaving orphaned headings.
Basic Usage
Place items inside a .columns
container and set the maximum columns on the container with data-max-columns
. The engine computes the height from the parent container and manages hidden items automatically.
<div class="columns" data-max-columns="1">
<div class="column">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Title goes here</span>
<span class="description">Description goes here</span>
<div class="flex gap--small">
<span class="label label--small label--underline">Time</span>
<span class="label label--small label--underline">Status</span>
</div>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Title goes here</span>
<span class="description">Description goes here</span>
<div class="flex gap--small">
<span class="label label--small label--underline">Time</span>
<span class="label label--small label--underline">Status</span>
</div>
</div>
</div>
</div>
</div>
Automatic Multi-Column Layout
Increase data-max-columns
to allow the engine to distribute visible items across more columns when beneficial.
<div class="columns" data-max-columns="2">
<div class="column">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Title goes here</span>
<span class="description">Description goes here</span>
<div class="flex gap--small">
<span class="label label--small label--underline">Time</span>
<span class="label label--small label--underline">Status</span>
</div>
</div>
</div>
</div>
</div>
<div class="columns" data-max-columns="3">
<div class="column">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Title goes here</span>
<span class="description">Description goes here</span>
<div class="flex gap--small">
<span class="label label--small label--underline">Time</span>
<span class="label label--small label--underline">Status</span>
</div>
</div>
</div>
</div>
</div>
Clamp-aware Overflow
The engine re-clamps text for the actual column width. Apply data-clamp
on titles or descriptions as needed.
<div class="columns" data-max-columns="2">
<div class="column">
<div class="item">
<span class="title" data-clamp="1">Title text…</span>
<span class="description" data-clamp="3">Description text…</span>
</div>
</div>
</div>
Group Headers
Mark headers with group-header
. The engine avoids orphaned headers and duplicates a header at the start of the next column when a group spills over.
<div class="columns" data-max-columns="3">
<div class="column">
<span class="label label--medium group-header" data-group-header="true">Today</span>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small" data-clamp="1">Title goes here</span>
<span class="description" data-clamp="2">Description goes here</span>
</div>
</div>
<span class="label label--medium group-header" data-group-header="true">Tomorrow</span>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small" data-clamp="1">Title goes here</span>
<span class="description" data-clamp="2">Description goes here</span>
</div>
</div>
</div>
</div>
- Headers are never left as the last visible element in a column.
- When a group spills, a gray duplicate header is added to the next column for context.
Harmonious Group Columns
When the number of group headers equals the maximum columns and there's enough space, the engine places each group in its own column for a more harmonious layout.
<div class="columns" data-max-columns="3">
<div class="column">
<span class="label label--medium group-header" data-group-header="true">Today</span>
<!-- 2 items -->
<div class="item"><div class="meta"></div><div class="content"><span class="title title--small">Title</span><span class="description">Description</span><div class="flex gap--small"><span class="label label--small label--underline">Time</span><span class="label label--small label--underline">Status</span></div></div></div>
<div class="item"><div class="meta"></div><div class="content"><span class="title title--small">Title</span><span class="description">Description</span><div class="flex gap--small"><span class="label label--small label--underline">Time</span><span class="label label--small label--underline">Status</span></div></div></div>
<span class="label label--medium group-header" data-group-header="true">Tomorrow</span>
<!-- 3 items -->
<div class="item"><div class="meta"></div><div class="content"><span class="title title--small">Title</span><span class="description">Description</span><div class="flex gap--small"><span class="label label--small label--underline">Time</span><span class="label label--small label--underline">Status</span></div></div></div>
<div class="item"><div class="meta"></div><div class="content"><span class="title title--small">Title</span><span class="description">Description</span><div class="flex gap--small"><span class="label label--small label--underline">Time</span><span class="label label--small label--underline">Status</span></div></div></div>
<div class="item"><div class="meta"></div><div class="content"><span class="title title--small">Title</span><span class="description">Description</span><div class="flex gap--small"><span class="label label--small label--underline">Time</span><span class="label label--small label--underline">Status</span></div></div></div>
<span class="label label--medium group-header" data-group-header="true">This Week</span>
<!-- 2 items -->
<div class="item"><div class="meta"></div><div class="content"><span class="title title--small">Title</span><span class="description">Description</span><div class="flex gap--small"><span class="label label--small label--underline">Time</span><span class="label label--small label--underline">Status</span></div></div></div>
<div class="item"><div class="meta"></div><div class="content"><span class="title title--small">Title</span><span class="description">Description</span><div class="flex gap--small"><span class="label label--small label--underline">Time</span><span class="label label--small label--underline">Status</span></div></div></div>
</div>
</div>
Backwards compatibility
The Overflow engine remains compatible with legacy list attributes used in older plugins. When these
attributes are present on a descendant .column
or
.list
, the engine will promote them onto the
enclosing .columns
container at runtime.
Supported legacy attributes
data-list-limit="true"
: opts the list into Overflow. If the enclosing.columns
lacksdata-max-columns
, it will default to1
.data-list-max-columns
: sets the maximum column count. Responsive variants (e.g.,-sm
,-md
) on the legacy element are honored when present; the base value is used for the engine.data-list-max-height
: sets the height budget for the columns. Use a pixel value (e.g.,340
) orauto
to inherit from the parent container.data-list-hidden-count
: when set tofalse
, suppresses the trailing “and N more” label.
Legacy example (still works)
<div class="columns">
<div class="column"
data-list-limit="true"
data-list-max-height="340"
data-list-hidden-count="true"
data-list-max-columns="2">
<!-- Items go here -->
</div>
</div>
Notes
- If both legacy and new attributes are present, the explicit
.columns[data-max-columns]
takes precedence for column count. - When only
data-list-limit
is present, the engine defaults to 1 column. - When
data-list-hidden-count
is omitted, the hidden count label is shown.