Design System
Container
Surface wrapper that gives content the right fill, elevation and border for its context. eShop platform — eleven variants from flat through to modal, plus interactive neon, deep and action surfaces.
Playground
Base surfaces
Sunken recedes, raised sits above the page, flat is just an outline.
Sunken
Raised
Flat
Brand surfaces
Neon is the bright brand green; deep is the dark brand green with light content. Both support interactive hover/pressed states.
Neon
Deep
Elevated surfaces
Increasing elevation: action → modeless → fixed → modal. Modeless dark inverts the content.
Action
Modeless
Modeless dark
Fixed
Modal
Sticky
Interactive
Pass interactive (or onClick) so neon, deep and action surfaces respond on hover and press. Hover the cards below.
Neon · hover me
Deep · hover me
Action · hover me
When to Use
Best for
- Wrapping any block of content in the correct surface for its elevation
- Cards, panels, popovers, sticky bars, modals — pick the matching variant
- Interactive cards (neon / deep / action) that respond to hover and press
Consider alternatives when
- You need an action trigger with a label — use a Button
- The element is purely text — style it directly, no surface needed
Props
| Prop | Type | Required | Description |
|---|---|---|---|
variant | "sunken" | "raised" | "flat" | "neon" | "deep" | "action" | "modeless" | "modeless-dark" | "sticky" | "fixed" | "modal" | No | Surface treatment (default: "raised") |
interactive | boolean | No | Enable hover/pressed feedback (neon, deep, action) |
onClick | () => void | No | Click handler — also makes the container keyboard-operable |
radius | number | No | Corner radius token (default: 24) |
padding | number | No | Inner padding — a spacing token value (omit for none) |
clip | boolean | No | Clip children to the rounded corners (default: true) |
children | ReactNode | No | Content |
Import
import { Container } from '@/components/Container/eshop';
Wrap in <div data-platform="eshop"> so the surface tokens resolve to the eShop foundation values.
Design Tokens
| Purpose | Token |
|---|---|
| Fill (per variant) | var(--color-fill-surface-{variant}) |
| Border (per variant) | var(--color-border-surface-{variant}) (via outline) |
| Flat border | var(--color-border-neutral) |
| Neon fill | var(--color-fill-surface-brand-bold) |
| Deep fill | var(--color-fill-surface-brand-dark) |
| Elevation | var(--surface-shadow-{action|modeless|fixed|modal}) |
| Sticky blur | var(--surface-blur-sticky) |
| Content (on-dark variants) | var(--color-content-on-dark-primary) |
| Radius (default) | var(--primitive-radius-24) |