Content on Socle

Overview

Mon, 01 Jan 0001 00:00:00 +0000

Nine components for laying out page content.

Page	Class	Purpose
Alert	`.alert`	An inline notification block
Badge	`.badge`	A small inline label
Banner	`.banner`	A centred modifier on `.alert`
Card	`.card`	A self-contained content card
Items	`.items`	The responsive grid that holds cards
List	`.list`	A compact labelled list
Media	`.media`	The structural base for images and video
Push	`.push`	A video or image with text and a call to action laid over it
Surtitle	`.surtitle`	An eyebrow label above a heading

Three of them are meant to nest

.items holds .card, a card holds a .media, and a .surtitle sits above the card’s title. Each one reassigns the next one’s tokens from its own namespace, so a media block or a surtitle adapts to its context without a variant class. The card page covers what it hands down.

Alert

Mon, 01 Jan 0001 00:00:00 +0000

An inline notification block.

<div class="alert alert-info">
 <p class="alert-heading">Heads up</p>
 <p>Your changes were saved.</p>
</div>

Variants

.alert-primary, .alert-secondary, .alert-brand, .alert-neutral, .alert-dark, .alert-light, .alert-success, .alert-danger, .alert-warning, .alert-info.

Each sets background, border and text colour from the matching -muted and -strong semantic tokens, so the pairing stays legible if the underlying colour changes.

.alert-success {
 --alert-color-background: var(--color-success-muted);
 --alert-color-border: var(--color-success-muted);
 --alert-color-text: var(--color-success-strong);
}

.alert-primary and .alert-brand resolve identically, as do .alert-secondary and .alert-neutral. .alert-dark is the one exception to the muted pattern: it takes --color-on-dark rather than --color-dark-strong.

Badge

Mon, 01 Jan 0001 00:00:00 +0000

A small inline label.

<span class="badge badge-success">Published</span>
<a class="badge" href="/tag/css">css</a>

It is inline-flex, so it sits in a line of text and can hold an icon beside its label.

Variants

The names mirror the alert set: .badge-primary, .badge-secondary, .badge-brand, .badge-neutral, .badge-dark, .badge-light, .badge-success, .badge-danger, .badge-warning, .badge-info.

The colours do not. A badge is a solid chip, not a tinted block:

.badge-success {
 --badge-color-background: var(--color-success);
 --badge-color-background-hover: var(--color-success-strong);
 --badge-color-text: var(--color-on-success);
}

Full colour for the background, and the matching --color-on-* token for the text, which is the pair that guarantees contrast when the underlying colour is overridden. Compare with .alert-*, which uses -muted and -strong because it has to remain readable behind a paragraph.

Banner

Mon, 01 Jan 0001 00:00:00 +0000

A thin variation on the alert, centred rather than start-aligned.

<div class="alert banner">
 <p>Site-wide announcement.</p>
</div>

It is a modifier, so use both classes. .banner on its own has no background, no border and no padding.

The whole component

.banner {
 --alert-align: center;

 p { margin-block: 0; }
}

That is the entire file. --alert-align feeds both align-items and text-align in the alert rule, so one token centres the block on both axes at once. The paragraph reset flattens the margins that would otherwise show up when the banner holds a single line.

Card

Mon, 01 Jan 0001 00:00:00 +0000

A self-contained content card.

<article class="card">
 <div class="content">
 <p class="surtitle">Category</p>
 <p class="title">Card title</p>
 <p class="description">Short description.</p>
 </div>
 <div class="media">
 <picture>...</picture>
 </div>
</article>

Child	Role
`.content`	The text block, grows to fill the card
`.title`	The heading line, styled from `--card-title-*`
`.description`	The body text, at `--card-font-size`
`.media`	The image or video, see Media
`.surtitle`	An optional eyebrow, see Surtitle

The source comment in card.css describes .card as a backwards-compatible alias for .item and recommends using .item directly. That is misleading for anyone consuming this package on its own: .item is not defined here. It lives in the Hugolify design system theme. Within @uncinq/css-components, .card is a complete implementation and the class to use.

Items

Mon, 01 Jan 0001 00:00:00 +0000

A responsive grid, and the usual container for cards.

<div class="items">
 <article class="card">...</article>
 <article class="card">...</article>
 <article class="card">...</article>
</div>

The children are yours to provide. Within this package that means .card; .item is defined by the Hugolify design system theme, not here.

The column count is intrinsic

grid-template-columns: repeat(
 var(--items-cols, auto-fill),
 minmax(min(var(--items-min-width, var(--max-width-item)), 100%), 1fr)
);

Items wrap once they no longer fit at --items-min-width, with no media query involved. The grid answers to the width of its container rather than to the width of the viewport, so the same markup works in a page, in a sidebar and inside another grid.

List

Mon, 01 Jan 0001 00:00:00 +0000

A compact labelled list.

<div class="list">
 <p>Optional label</p>
 <ul>
 <li>First</li>
 <li>Second</li>
 </ul>
</div>

The wrapper is a div, and the label is a sibling of the list, not inside it. That is the one structural thing to get right. Either ul or ol works.

What it changes

Three small things, and nothing else:

Selector	Token	Effect
`p`	`--list-label-font-weight`, `--list-label-margin-block`	The label’s weight and the space under it
`li`	`--list-item-font-size`, `--list-item-gap`	Item size, and the space between items as a block margin
`.list, ul, ol`	—	`margin-block-end: 0`, so the block ends flush

Item spacing is a margin, not a gap, because the list is not a flex container. A gap here would do nothing.

Media

Mon, 01 Jan 0001 00:00:00 +0000

The structural base for media blocks. It holds an aspect ratio and crops whatever is inside it.

<div class="media">
 <picture>
 <img src="..." alt="...">
 </picture>
</div>

Class	Use
`.media`	Base, for a picture or a video
`.media-logo`	Logo, contained rather than cropped
`.media-icon`	Icon, no ratio and no background

.media-logo and .media-icon are modifiers: use them alongside .media.

What the base does

.media {
 aspect-ratio: var(--media-ratio);
 background-color: var(--media-color-background);
 overflow: hidden;
}

and then stretches img, picture and video to fill it with object-fit: cover. The background shows through while an image loads, which is what keeps a grid of cards from flashing white.

Push

Mon, 01 Jan 0001 00:00:00 +0000

A video or an image with a surtitle, a title, some text and a call to action laid over it.

<div class="push push-darken">
 <div class="content">
 <p class="surtitle">Collection</p>
 <h2 class="title">Push title</h2>
 <div class="text"><p>Short text.</p></div>
 <a class="btn" href="/collection">Discover</a>
 </div>
 <div class="media">
 <picture>...</picture>
 </div>
</div>

Child	Role
`.content`	The text box, placed inside the push
`.media`	The image or video, stretched behind the content, see Media
`.surtitle`	An optional eyebrow, pulled back by one gap, see Surtitle
`.btn`	The call to action, whose `::after` makes the whole push clickable

The markup is the same for every modifier: switching a push to a card, or moving its text, is a class change, never a change of structure.

Surtitle

Mon, 01 Jan 0001 00:00:00 +0000

An eyebrow label above a heading.

<p class="surtitle">Category</p>
<h2>Main title</h2>

It is a leaf component: no children, no variants, no states. Every property reads a --surtitle-* token, including the border set, so it can be a plain label in one theme and a chip in another without a second class.

Token group	Covers
`--surtitle-color-*`	Background and text
`--surtitle-border-*`	Colour, style, width and radius
`--surtitle-font-family`, `-font-size`, `-font-weight`, `-letter-spacing`, `-line-height`, `-text-transform`	Typography
`--surtitle-padding-`, `-margin-block-`	Spacing

It pulls itself closer inside a card

A card reassigns one token: