Swiss Precision
Swiss design masonry grid with precise typography and clean lines.
Main Features of Swiss Precision
How to Use Swiss Precision in Next.js
Installation Guide for Swiss Precision
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #E5E5E5 | Background color (hex, rgb, or hsl). |
accentColor | string | #FF3B30 | Accent color for highlights (hex, rgb, or hsl). |
mainTitle | string | HELV. | Main title text. |
subtitle | string | INTERNATIONAL\nSTYLE | Subtitle text (supports \n for line breaks). |
year | string | (1957) | Year text displayed in sidebar. |
coordinates | {x: string, y: string} | {x: '1024', y: '0768'} | Coordinate values displayed in bottom section. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat is 'Swiss Design'?
The component follows the International Typographic Style (Swiss Style), focusing on readability, objective layout structure, and sans-serif typography (Helvetica-inspired).
QAre colors editable?
Absolutely, you can adjust both the `backgroundColor` and the primary `accentColor` (default red) to create 'Noir' or 'High-Contrast' Swiss effects.
QIs it mobile responsive?
The grid spans and typographic scales adapt for mobile, ensuring the objective clarity remains consistent on high-density mobile screens.