Section
Like pieces in a construction kit, the style system uses a minimal set of semantic building blocks to represent content: <section>, .card, and <table>.
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.
.card
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.
.card-header
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.
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.
.rounded
.circle
.shadow
.card-hover
Special Offer: Buy 1 Get All Free!
.square
Rare Card Deck
.borderedTables
Tabular data forms a crucial part of business information presentation. Tables allow users to quickly comprehend and compare large data volumes.
| Library | Versatility | Simplicity | Recognizability | Score |
|---|---|---|---|---|
| Tailwind | V | X | X | 1 |
| Bootstrap | V | X | V | 2 |
| Rare Styles | V | V | V | 3 |
Tables default to min-width: 100%, occupying the full width of their parent element. Horizontal scrolling overflow-x: auto; prevents disruption of the overall layout grid.
Always remember the primary purpose of tables: presenting data for quick analysis and comparison. Don't overload tables with unnecessary information or use them for content better presented as text or graphics.
To limit table width, use either parent elements or preset spacing selectors like .width-50, .mobile: width-75, etc., or create custom classes.
Preset Tables
For dashboards and other data-heavy pages, the library includes preset selectors. These allow you to quickly create readable tables with minimal code—like specialized table templates in your construction kit.
.table-striped — Used for multi-column tables with alternating background colors for easier reading.
.table-terminal — Used for tables displaying terminal-style data.
.table-terminal example:
| Visitors: | 1,234 |
| Clicks: | 345 |
| Leads: | 123 |
| Sales: | 12 |
| Revenue: | $1,234 |
| Conversion: | 1% |