Manual v0.1 // Component Library
The Container
Wrapper
"One max-width, three sizes. Replaces the .page-wrapper every project kept re-pasting."
Each track below is full-bleed; the dashed box is the real <Container> from echo-ui at that size, centered with its own inline padding. Resize the window to see the clamp() ranges breathe.
01 / SM
sm
Forms, cards
clamp(320px, 90vw, 800px)
Spec800px cap / clamp(1rem,4vw,3rem) pad
size="sm"
02 / MD
md
Default
clamp(320px, 90vw, 1200px)
Spec1200px cap / clamp(1rem,4vw,3rem) pad
size="md"
03 / LG
lg
Wide layouts
clamp(320px, 95vw, 1440px)
Spec1440px cap / clamp(1.5rem,5vw,4rem) pad
size="lg"
How to use
import { Container } from "echo-ui";<Container size="md">
<YourContent />
</Container>size accepts sm, md, or lg, defaults to md.
Base rule
width: 100%, margin-inline: auto
Source
echo-ui/components/Container.vue