Swiss Portfolio
Swiss design-inspired hero section with clean typography and minimalist aesthetics.
Main Features of Swiss Portfolio
How to Use Swiss Portfolio in Next.js
Installation Guide for Swiss Portfolio
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | #000000 | Primary text color (black). |
backgroundColor | string | #ffffff | Clean white background. |
accentColor | string | #ef4444 | Minimal accent color for highlights. |
fontWeight | string | 400 | Typography weight (300-700). |
spacing | string | minimal | Spacing style: 'minimal', 'moderate', or 'generous'. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QIs the typography fixed?
The component is optimized for bold Sans-Serif fonts like Helvetica or Inter, but the `fontWeight` prop allows for subtle adjustments to the visual weight.
QCan I change the layout spacing?
The `spacing` prop allows you to choose between 'minimal', 'moderate', and 'generous' layouts to fit your content's density requirements.
QDoes it support accent colors?
Yes, the `accentColor` prop (default Swiss Red) is used for subtle highlights like arrows or button hover states to maintain the minimalist aesthetic.