Prastora
Explore Prastora

Components

Every building block, live, grouped by the file it lives in. Each group links to the templates where it does real work, which is usually the better way to judge it.

Layout and type

css/core.css

The scale, stacks, grids and a few typographic rules every page relies on.

Seen in: Why Prastora

.stack · .stack-small

Spacing between siblings comes from gap, so no component can cancel it.

Second paragraph.

Smaller rhythm inside.

Like this.

.grid .grid-3 · .pair

1
2
3
Wider part
Narrow

.aligned rows on a shared subgrid

Without a build step

  • Semantic HTML
  • CSS Grid and logical properties for layouts that adapt
  • Native disclosures
  • Local SVG artwork

With room to grow

  • Composable sections
  • Shared theme values
  • Rows that line up even when one item wraps
  • No browser runtime

.aligned-rows · --aligned-rows (3 by default)

Put cards with matching direct-child slots in a grid. Each slot grows to fit the longest content in that visual row, including after a text change. The expert cards use six slots; no fixed heights or scripts are needed.

A heading that needs more room

Matching parts stay aligned when one card needs more lines. Every word remains visible as the content grows.

See expert cards →

Line endings: ordinary, balance, pretty

Build thoughtful websites with a predictable visual rhythm.

Build thoughtful websites with a predictable visual rhythm.

Small refinements can make a page calmer to read, especially when a paragraph ends with a single short word.

Small refinements can make a page calmer to read, especially when a paragraph ends with a single short word.

Scripts and direction: lang, dir, <bdi>

مساحة مرنة للمحتوى

هذا نص تجريبي لفحص اتجاه القراءة والمسافات داخل البطاقة.

hello@example.org

让内容拥有合适的空间

这是一段用于测试中文排版的示例文字。布局应当适应不同的内容。

Content

css/components/content.css

Cards, buttons, media and the small pieces most pages are built from.

Seen in: Landing · Article · Product

.card variants

Plain card

A boundary for a group of information, when one helps.

Icon in the text

The icon sits in the flow of the description, not above it.

A link

Icon by the heading

Headings line up even when only some cards have icons.

.btn · .btn-secondary · .badge

PrimarySecondaryBadgeAnother

.disclosure on native <details>

What does this need?

Nothing but HTML. It opens and closes on its own.

And keyboard support?

Built in.

.media in a figure

Image and caption stay in the reading flow.

.specs · .data-table

Sensor
24 MP
Weight
380 g
StopDelay
Mill Lane+0:40
Harbour Bridge+3:10

.fill / .fill-art

Art that takes the height left beside text, with a minimum, a maximum and an allowed overlap. See the cyclist under the author card in the article.

Forms

css/components/forms.css

Native fields with hints and errors that appear after the visitor has interacted, plus choice chips and cards.

Seen in: Checkout · Service · Subscriptions

.field with hint and error

Type something without an @ and leave the field.

An email address needs an @ and a domain.

.choice with .swatch · .check

Colour

.choice-stack

Delivery

Commerce

css/components/commerce.css

Ratings, order summaries and the pieces of a shop page. The CSS-only product viewer lives on the product page.

Seen in: Product · Checkout

.rating

4.6 out of 5 · 212 reviews

.order-lines · .order-totals

  • Travel tripod
    Your fourth · 1    $89
Delivery
Free
Total
$89

Data

css/components/data.css

Key figures, statuses and meters for dashboards and reports.

Seen in: Dashboard

.kpi

Orders

289

6.3% vs previous

Average order

$612

0.4% vs previous

.status · .meter

PaidPendingRefunded

Visits100%
Paid34%