Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pagePill to Card Morph
Compact profile pill built as a plain, fully editable Bricks tree: section > container > row of "Morph Card" component instances (add/remove/reorder in Layers). Card props: photo, photoAlt, name, role, meta (a second detai…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Pill to Card Morph reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Component
- Category
- Cards
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 3
Set on the section, in Bricks’ attributes panel. No code needed.
data-expandwhich way the card grows out from the pill
data-pill-sizeresting pill size
data-card-sizeexpanded card size
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
photohttps://images.unsplash.com/photo-1580489944761-15a19d654956?w=320
photoAltempty
nameNaomi Cross
roleSenior Product Designer
metaFieldstone · Austin
descriptionLeads design for the onboarding and billing surfaces, and keeps the c…
showEmailTrue
showPhoneTrue
phone+1 (512) 555-0148
showLocationTrue
locationAustin, TX
showLinkTrue
linkLabelPortfolio
linkUrlhttps://bricksed.com
ctaLabelSend message
ctaUrl#contact
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro
