BlocksSocial Post Cards
Blocks
Social Post Cards
'As Seen on Social' row extracted from the homepage. The live site embeds real creator video content — we use placeholder tiles instead rather than sourcing third-party UGC.
Configurator
Usage
<SocialPostCards
title="As Seen on Social"
posts={[{ caption: "Multi-Peptide Serum for Hair Density" }, /* ... */]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "As Seen on Social" | Section heading. |
| posts | SocialPost[] | — | { caption, href? } tiles; defaults to three product-tagged placeholders. |
Do's and Don'ts
Do
- ·Use this for a row of exactly three posts — the grid is built sm:grid-cols-3 and doesn't reflow gracefully at other counts.
- ·Keep captions to a single product name so they fit on one line under the tile.
Don't
- ·Don't embed real third-party video/UGC without the creator's and platform's permission — that's exactly why this ships with placeholder tiles.
- ·Don't use this component as a generic image gallery; it's specifically shaped for the "as seen on social" pattern (dark tile, play icon, caption, Shop Now).