Uilora Phone Feature
Feature section with an iOS phone mockup (status bar, document editor, formatting options panel), 4 surrounding feature cards, floating '700' counter badge, floating checkmark badge, and a bottom fade-to-white effect.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Powerful features at your fingertips | Section heading. The word 'fingertips' is automatically highlighted with the accentColor as a marker effect. |
| description | string | Slash command gives instant access to components, templates, and tokens for a streamlined workflow. | Subtitle shown below the heading. |
| accentColor | string | #bbf451 | Hex color used for the 'fingertips' highlighter mark behind the text. |
When to Use
Perfect for product landing pages that want to showcase a mobile-first or cross-platform experience. The phone mockup draws the eye while the surrounding cards communicate key feature benefits at a glance.
Best Practices
Include 'fingertips' in your title string to activate the highlight effect. Bright lime/yellow accent colors work best for the highlighter effect as they contrast clearly against dark text. The section requires a white page background for the bottom fade to blend seamlessly.
Why This Component Matters
Phone mockups ground abstract software features in tangible reality — users immediately understand what the UI looks like. The floating badges (700 components, checkmark) build social proof and trust signals directly in the feature section.
FAQ
QHow does the 'fingertips' highlight work?
The title string is split on the literal word 'fingertips'. An absolutely positioned span with the accentColor background sits behind the word at 42% height from the bottom, creating a marker/highlighter effect. Change highlightWord in the component to use a different word.
QCan I change the phone content?
Yes — the phone UI (document title, placeholder lines, formatting cells) is hardcoded inside PhoneMockup. Edit that component to customize the title, options panel content, or add real text content.
QHow does the bottom fade work?
Two gradient overlays are used: one inside the phone mockup (transparent → rgba(255,255,255,0.96)) to fade the phone content, and one at the section level (transparent → white) to blend the whole section into the page background.
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.