Every component you'll ever need.
Tokens, inputs, cards, feedback, overlays — each one built from CSS variables, ready to compose into full page sections.
Tokens, color, typography
The atomic layer. Change a token, the whole system updates.
Brand palette
Derived surfaces
Type scale
Spacing
Radius
First impressions live here.
Multiple navbar variants for different contexts — sticky, transparent over hero, minimal, with language switcher. All use the same .navbar base, modified by suffix classes.
Default — sticky with blur
Class: .navbar · Use for: standard product or marketing pages with a CTA.
Transparent — sits over hero image
Class: .navbar.navbar--transparent · Use for: hero-driven landing pages where the navbar overlays an image.
Minimal — no CTA, links + icon only
Class: .navbar.navbar--minimal · Use for: editorial sites, portfolios, blogs.
With phone CTA — service businesses
Class: .navbar with phone CTA · Use for: service businesses where direct contact converts.
Capture every lead, beautifully.
Forms convert visitors into customers. These inputs are designed to feel effortless — reducing friction at the moment that matters most.
One object. One container. Infinite uses.
Cards are the universal content unit — for stats, features, testimonials, pricing, media, and more.
"It changed how our whole team works."
Dense information, zero confusion.
Sortable rows, status badges, sparklines — structured data that scans in seconds.
| Name | Status | Value | Updated |
|---|---|---|---|
| Alpha project | Active | €12,400 | 2 hrs ago |
| Beta launch | Pending | €8,900 | Yesterday |
| Gamma sync | Blocked | €3,100 | Mar 30 |
| Delta pipeline | Draft | €0 | 1 week ago |
Keep users informed, never guessing.
Alerts, badges, chips, progress indicators, empty states — the system that talks back.
Each chip color variant derives from a Rechtecheck brand token. The same surface tokens are reused by badges, so chip + badge variants stay visually consistent. Color codes for each variant are documented in the styleguide colors section.
Context without leaving the page.
Modals, tooltips, dropdown menus, command palettes, toast notifications — layered UI that appears when needed.
Ready to get started?
This is your moment. Confirm your choice and we'll take care of the rest.
Give everything a face.
Avatars, ratings, placeholder images — visual identity for people, products, and content.
Show progression. Tell the journey.
Horizontal timelines for processes, vertical timelines for stories. Both use dots, lines, and content blocks to visualize sequence.
Horizontal timeline
Vertical timeline
Centered timeline
So läuft es ab
Drei klare Schritte — von der ersten Frage bis zur Lösung.
Break the grid. Add energy.
Tilted section edges create visual flow between sections. The angle and height are controlled by --skew-angle and --skew-height CSS variables.
--skew-angle to change the tilt.Dip — concave curved edges
An alternative to the straight skew. Uses .dip-top / .dip-bottom with --dip-height and --dip-fill (set to the next section's background color).
Dip variant
Concave curved edges instead of straight skew.
12-column layout, on demand.
Bootstrap 5.3's grid-only stylesheet is loaded alongside main.css. Use .container, .row, and .col-* for predictable column layouts. Widths must always sum to 12 — these examples use .col-3 (always 4-up) and a .col-1 ruler.
Segment content without new pages.
Pill-shaped tab bar with animated content panels. Each tab reveals its own content, image, and optional quote.
main.js — no inline onclick handlers needed. Just add data-tab attributes.Collapse and reveal.
FAQ-style collapsible items. The container .o-faq accepts two options: data-faq-single="true" ensures only one panel is open at a time; data-faq-duration="<ms>" overrides the expand/collapse timing.
Default — multiple panels can be open
is-open class. The toggle icon rotates 45° to form an ×. Max-height transitions handle the expand/collapse.data-faq-single is set on the wrapper.Single-open + faster timing — data-faq-single="true" data-faq-duration="180"
--faq-duration CSS variable so the toggle icon rotation stays in sync.Text over image. Instant visual impact.
Cards where the image fills the background and text sits at the bottom over a gradient. Ideal for service categories, portfolio items, or topic browsing.
Four reasons around one visual.
A 2×2 text grid flanking a center image or video. The play button overlay is optional.
Show the process with bold numbers.
Large faded step numbers anchor each card. Combine with placeholder images for visual weight.
Stack achievements inline.
Arrow-prefixed achievement bullets for heroes, about sections, or authority organisms.
- ▸ 10+ years of hands-on experience
- ▸ Published 3 books on the subject
- ▸ Reduced risk exposure from 22% to 5%
- ▸ Certified by the national authority
- ▸ Works on dark backgrounds too
- ▸ Use inside heroboxes or stages
- ▸ Accent arrow icon stays visible
Ready to see full page sections?
Components become powerful when composed into organisms — heroes, pricing tables, testimonial strips, FAQ sections, and more.
View organisms →