Uilora Feature Trio
Centered feature section with large heading and three equal cards — each featuring a unique inline SVG illustration (shield, folder, component grid) on a light gradient background.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Unlock the Full Potential of Your Component Library | Section heading. The phrase 'Component Library' is highlighted in an emerald gradient. |
| description | string | Explore Uilora's core benefits that make UI development fast, accessible, and production-ready. | Subtitle shown below the heading. |
| accentColor | string | #10b981 | Hex accent used for the gradient heading highlight, all three SVG illustrations, and card backgrounds. |
When to Use
Ideal for SaaS product feature sections, component library homepages, and marketing pages that need to communicate 3 core value propositions clearly. The inline SVG illustrations mean zero image dependencies.
Best Practices
Emerald/teal accent colors look best since the illustrations use dark green as the base tone. Keep card titles under 5 words and descriptions to 2 lines for visual balance across all three cards.
Why This Component Matters
Custom inline SVG illustrations communicate quality and craftsmanship that generic icons cannot. Each illustration is thematically matched to its feature — shield for reliability, folder for ease, grid for breadth.
FAQ
QHow do I change the illustration colors?
Each illustration receives the accentColor prop and uses it for gradients, glows, and highlights. Change the accentColor prop to retheme all three simultaneously.
QCan I swap out the illustrations?
Yes — the IllusComp prop on FeatureCard accepts any React component that takes an accent prop. Replace ShieldIllus, FolderIllus, or GridIllus with your own SVG component.
QWhich phrase gets the gradient highlight?
The gradientWord constant is set to 'Component Library'. Change it to highlight any phrase in your title string.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.