Building Blocks

Like pieces in a construction kit, the style system uses a minimal set of semantic building blocks to represent content: <section>, .card, and <space>.

These foundational elements combine with typography, whitespace, and basic decorative elements to solve any content presentation challenge—no matter how complex the hierarchy.

Section

The section serves as the basic semantic block, thematically uniting primarily text elements. Think of it as the foundation piece in your construction set.

Visually separated with margin-bottom: var(--space-lg):

Card

Cards provide more distinct content separation, allowing you to create complex hierarchies and group related elements. By default, they stand out through background color.

From a markup perspective, cards have a default flex column layout.

Consider cards as your versatile connector pieces—they can take on any visual style: sizes, colors, margins, paddings, alignment, and borders.

Content-wise, cards can function as simple containers or develop their own complex hierarchy and structure. They can hold any content type, blocks, or interactive elements.

Cards come in two default styles: .card and .card-inverted.

Card Deck

Just as you would combine building blocks to create larger structures, cards can be assembled into unified semantic constructions without limitations.

Card Deck Example

„Card Deck” isn’t a standalone selector. Block-level parent elements like <div>, .card, or <section> can serve as wrappers.

.card .center-center .padding-lg

Remember that cards are standard block elements capable of holding any content type: text, images, charts, tables, or interactive elements.

.card-inverted

Helper Selectors

The stylesheet includes several preset helper selectors for styling cards. Their combinations can satisfy virtually any design requirement—like specialized adapter pieces that help connect your building blocks in unique ways.