Feature

An icon with a title and a short text, beside or above it, for feature lists and benefits.

CSS only components/feature.css

Beside (default)

Invoices in a minute

Pick a client, add lines, send. Numbering and VAT are filled in.

Automatic reminders

Polite nudges before and after the due date.

Bank sync

Payments are matched as they arrive.

<div class="dsgn-grid" data-cols="1" data-cols-tablet="3"><div class="dsgn-feature"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">bolt</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Invoices in a minute</h3><p class="dsgn-feature-text">Pick a client, add lines, send. Numbering and VAT are filled in.</p></div></div><div class="dsgn-feature"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">notifications</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Automatic reminders</h3><p class="dsgn-feature-text">Polite nudges before and after the due date.</p></div></div><div class="dsgn-feature"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">account_balance</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Bank sync</h3><p class="dsgn-feature-text">Payments are matched as they arrive.</p></div></div></div>

Stacked, left

Invoices in a minute

Pick a client, add lines, send.

Automatic reminders

Polite nudges before and after the due date.

Bank sync

Payments are matched as they arrive.

<div class="dsgn-grid" data-cols="1" data-cols-tablet="3"><div class="dsgn-feature" data-layout="stack"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">bolt</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Invoices in a minute</h3><p class="dsgn-feature-text">Pick a client, add lines, send.</p></div></div><div class="dsgn-feature" data-layout="stack"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">notifications</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Automatic reminders</h3><p class="dsgn-feature-text">Polite nudges before and after the due date.</p></div></div><div class="dsgn-feature" data-layout="stack"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">account_balance</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Bank sync</h3><p class="dsgn-feature-text">Payments are matched as they arrive.</p></div></div></div>

Stacked, centred

Invoices in a minute

Pick a client, add lines, send.

Automatic reminders

Polite nudges before and after the due date.

Bank sync

Payments are matched as they arrive.

<div class="dsgn-grid" data-cols="1" data-cols-tablet="3"><div class="dsgn-feature" data-layout="center"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">bolt</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Invoices in a minute</h3><p class="dsgn-feature-text">Pick a client, add lines, send.</p></div></div><div class="dsgn-feature" data-layout="center"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">notifications</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Automatic reminders</h3><p class="dsgn-feature-text">Polite nudges before and after the due date.</p></div></div><div class="dsgn-feature" data-layout="center"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">account_balance</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Bank sync</h3><p class="dsgn-feature-text">Payments are matched as they arrive.</p></div></div></div>

In an auto grid

data-cols="auto": as many columns as fit, each at least --min (16rem by default), exactly like cards. In Figma: Grid › Columns = Auto, each Feature at Width = Fill (it has min width 256).

Invoices in a minute

Pick a client, add lines, send.

Automatic reminders

Polite nudges before and after the due date.

Bank sync

Payments are matched as they arrive.

Support in Czech

A real person, on working days.

Data in the EU

Encrypted at rest and in transit.

<div class="dsgn-grid" data-cols="auto"><div class="dsgn-feature" data-layout="stack"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">bolt</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Invoices in a minute</h3><p class="dsgn-feature-text">Pick a client, add lines, send.</p></div></div><div class="dsgn-feature" data-layout="stack"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">notifications</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Automatic reminders</h3><p class="dsgn-feature-text">Polite nudges before and after the due date.</p></div></div><div class="dsgn-feature" data-layout="stack"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">account_balance</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Bank sync</h3><p class="dsgn-feature-text">Payments are matched as they arrive.</p></div></div><div class="dsgn-feature" data-layout="stack"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">support_agent</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Support in Czech</h3><p class="dsgn-feature-text">A real person, on working days.</p></div></div><div class="dsgn-feature" data-layout="stack"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">lock</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Data in the EU</h3><p class="dsgn-feature-text">Encrypted at rest and in transit.</p></div></div></div>

Title only, text only, plain icon

Title and text are optional; the icon can have a background (data-variant) or be bare (data-size).

Support in Czech

Data stored in the EU, encrypted at rest.

Works everywhere

Phone, tablet and desktop.

<div class="dsgn-grid" data-cols="1" data-cols-tablet="3"><div class="dsgn-feature"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">support_agent</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Support in Czech</h3></div></div><div class="dsgn-feature"><span class="dsgn-icon" data-variant="subtle" aria-hidden="true">lock</span><div class="dsgn-feature-body"><p class="dsgn-feature-text">Data stored in the EU, encrypted at rest.</p></div></div><div class="dsgn-feature"><span class="dsgn-icon" data-size="xl" data-intent="accent" aria-hidden="true">devices</span><div class="dsgn-feature-body"><h3 class="dsgn-feature-title">Works everywhere</h3><p class="dsgn-feature-text">Phone, tablet and desktop.</p></div></div></div>

Usage

The icon is any .dsgn-icon — with a background (data-variant subtle|solid) or bare (data-size); title and text are both optional — leave out the one you do not need. The title takes whatever heading level fits the page. Put several in a Grid: <div class="dsgn-grid" data-cols="1" data-cols-tablet="2" data-cols-desktop="3">, or data-cols="auto" (as many columns as fit, each at least --min, default 16rem = 256 px — the same rule as Card; in Figma Feature carries min width 256 and goes into Grid › Auto at Width = Fill).

Attributes

Attribute	Values and notes
`data-layout`	inline (default: icon beside the text) · stack (icon above, left) · center (icon above, centred)

Details

Classes: .dsgn-feature .dsgn-feature-body .dsgn-feature-title .dsgn-feature-text .dsgn-icon
Tokens used: --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-size-title --dsgn-font-weight-semibold --dsgn-icon-size --dsgn-line-height-body-s --dsgn-line-height-title --dsgn-space-12 --dsgn-space-16 --dsgn-space-4 --dsgn-text --dsgn-text-muted
In Figma: Feature
Import alone: dsgn.systems/components/feature.css