Farmio UI LayoutsActive Menu: Crews
Figma Spec Verified
Layout System Showcase
Premium structural primitives designed for perfect layout alignment, viewport responsiveness, and semantic structure.
1. Screen Container
Centers layout content, clamps maximum page widths dynamically, and provides responsive horizontal gutters.
w-fullmax-w-7xlmx-auto
2. Reusable Section
Separates sections of content semantically using HTML5 <section>. Supports headers, summaries, and action slots.
as="section"py-10 (default)
-
3. Divider
Specified as a 52.5px wide border-tertiary separator to section off small inline element groups.
Accent Divider Spec Preview:
StartEnd (52.5px)
4. Card Component
Clamped to 1137px maximum width, height adjust-to-content, 20px gaps, 24px padding, and 100% opacity.
max-w-[1137px]gap-[20px]padding-[24px]rotate-0opacity-100
Live Layout Tester
Interact with this live card component to see layout flow, spacing gaps, and nested dividers in action.
Assign Farm Tasks
Enter details below to assign tasks to our active farm hands.
1137px max-width layout
divider spec
Component Specifications
| Component | Applied Design Tokens / Constraints |
|---|---|
| Card | max-w-[1137px] • h-auto (content fit) • gap: 20px (gap-5) • p-6 (24px) • opacity-100 • rotate-0 |
| Divider | w-[52.5px] • h-[0px] • border-width: 1px • color: var(--Colors-Border-border-tertiary, #1C1C1C1A) |
| ScreenContainer | mx-auto • px-4 sm:px-6 lg:px-8 • max-w-7xl (xl) / size customizable |
| Section | HTML5 <section> • spacing: py-6 (sm), py-10 (md), py-16 (lg) |