Standard website components

Neutral examples for styling. Form actions are local demonstrations.

Buttons and actions

Link button

Use keyboard focus and pointer hover to style interactive states.

Menu
More actions
  1. 1. Details — complete
  2. 2. Delivery — current
  3. 3. Review

Form controls and validation

Text inputs
Enter your full name.
Please enter a valid email address.
Email address accepted.
CHF.00
Choices
Special controls

Feedback, labels, and status

Information. There is a new update available.
Success. Your changes have been saved.
Warning. Review your details before continuing.
Error. Something went wrong. Please try again.

Example notification with an action.

DefaultPublishedDraftArchivedDesignFilter: articles
AE
● Online
65%
60%
Loading content…
Loading title…Loading description…

No results yet

Try another search or clear the filters.

Change search

Content could not be loaded

This is an example of an inline error state.

Try again

404

Page not found

The page you are looking for may have moved.

Back to home

Cards, media, and content lists

Gray placeholder illustration
Example image caption
Featured

A card with an image

A short description gives context and makes the next step clear.

Read more
29 September 2026 · 4 min read

A simple text card

Content without an image, with a longer description to test uneven heights across a row of cards.

Explore the details →
Product image placeholder

Example product

CHF 149 CHF 99

★★★★☆ (24 reviews)

Tables and data

Example project overview
ProjectStatusOwnerBudgetAction
Website refreshActiveAlex ExampleCHF 12’000View
Brand identityPendingJamie SampleCHF 8’000View
Editorial platform with a longer project nameDraft—CHF 5’000View
TotalCHF 25’000
Projects
128
Satisfaction
98%
Years of experience
12

Accordions, tabs, and dialog

What does an open accordion look like?

This content is visible by default. Click the summary to close it.

How does a closed item look?

This content appears when you expand the item.

A longer question that can wrap onto multiple lines on a small screen?

Long labels help reveal spacing and alignment issues.

Overview panel content.

Example dialog

Use this modal to style overlays, dialog spacing, and actions.

Common page sections

A new perspective

Make room for your next big idea

A hero section with a clear headline, supporting copy, and two calls to action.

Get startedExplore our work

Thoughtful design

A short benefit statement for the first feature.

Clear communication

A short benefit statement for the second feature.

Lasting results

A short benefit statement for the third feature.

“The entire experience felt clear, considered, and easy to understand.”

Alex Example — Example Company

Starter

For small teams

CHF 49 / month

  • Five projects
  • Email support
  • Monthly reports
Choose this plan

  1. Discovery

    Define the goals and explore possibilities.

  2. Launch

    Share the finished result.