Magoo Component UI
CSS-less skeletons · 4 themes
Magoo Component UI
CSS-less skeletons · 4 themes feature-alternating organism experimental Alternating image/text feature rows down the page.
The width preview needs a screen wider than the chosen width — use a larger device (or a desktop browser) to see the desktop and tablet layouts.
A single canonical source per component emits SDC, React, Vue, and Storybook — no hand-porting, no drift.
Markup is tokenized Tailwind bound to CSS-variable design tokens. Swap a value set to re-skin everything.
Rich per-component metadata makes the catalog explorable so an agent can pick the right component fast.
marketing/feature-alternatingname: "Alternating Features"
short_description: Alternating image/text feature rows down the page.
long_visual_description: >
A stack of feature rows, each pairing a text block (title + body) with an image; rows
alternate the image side down the page.
use_cases:
- Feature walkthrough on a landing page.
- Product capability showcase.
- How-it-works section.
- Benefit-by-benefit storytelling.
- Solution overview.
recommended_for:
- Presenting several features with supporting imagery, alternating sides.
avoid_for:
- A compact icon feature grid (use feature-grid).
markets:
- Global
example_usage: >
Alternate the reverse flag down the rows so images zig-zag; keep each body to a sentence
or two.
props:
rows: The feature rows with title, body, image, and reverse.
example_prompts:
- "Add alternating image/text feature rows."
- "Add a how-it-works section with zig-zag features."
lifecycle: experimental
content_model: A stack of alternating image/text feature rows.
theming:
tokens_used:
- --color-on-surface
- --color-on-surface-muted
- --radius-card
- --shadow-card
- --font-heading
- --space-section
editorial_guidance: >
Lead each row with a benefit; keep bodies concise so they balance the image.
categorization:
category: Marketing
subcategory: Features
atomic_type: organism
usage_type: [media]
maturity: ai-generated
wcag:
level: AA
notes: Each row uses a real heading; images are decorative. Order in the DOM keeps a sensible reading order regardless of the visual side.
keyboard_support: "none"
seo_score: 55
text_direction: both
| Name | Type | Req |
|---|---|---|
| rows | array | ✓ |