Uilora Board
Uilora Board — dark moodboard/curator masonry grid with sage green accents, color swatch tiles, quote cards, and a 2×2 mini image grid.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [/* 7 Unsplash URLs */] | Array of 7 image URLs for the board tiles. |
| backgroundColor | string | "#262626" | Dark charcoal background. |
| accentColor | string | "#7a9e8e" | Sage green accent for avatar gradients and quote attributions. |
| boardTitle | string | "Uilora Curation" | Board heading in the header section. |
| subtitle | string | "Public Board" | Small label above the board title. |
When to Use
Use Uilora Board for design inspiration collections, mood boards, creative briefs, and portfolio showcases. The mixed content tiles (images + swatches + quotes) make it ideal for showcasing design systems and brand palettes.
Best Practices
Provide 7 varied images for the best visual rhythm. The swatch colors (#7A9E8C, #4a5260, #b5a48e) are hardcoded for cohesion — override the SwatchCard component if you need custom palette colors.
Why This Component Matters
Uilora Board helps you build premium Uilora-powered curation interfaces that feel like are.na or Pinterest for design professionals. The mixed tile types create visual variety that keeps users engaged and exploring.
FAQ
QWhat is the 2×2 mini image grid?
A CSS grid with gridTemplateColumns: '1fr 1fr' inside a single masonry tile — showing two images side by side for a contact-sheet / polaroid strip aesthetic.
QCan I customize the quote text?
The QuoteCard has a hardcoded quote. Fork the component and export the quote as a prop if you need customizable quotes.
QWhat are the color dot circles in the header?
Three 22px circles in sage, purple, and slate blue — representing board collaborators or palette swatches. They are purely decorative and can be replaced with real avatar images.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.