Bento Cohort Hero — Mosaic Grid Variant
A bento-style hero that splits the top of a sales page into a mosaic of mixed-size cards covering the headline, outcome, instructor, dates, and CTA, pilots a senior-PM cohort but the pattern fits any cohort or program where many proof signals need to land in one screen.
Best for: Top of a cohort or program sales page where many proof signals (outcome, instructor, dates, scarcity) need to land at once before the visitor scrolls.
Live preview — scroll inside the frame to see the full page.
What it does
- Bento mosaic layout — five to seven cards of different sizes lock together into a single hero composition
- Headline anchor card — one oversized card carries the program promise and sets the tone for the whole hero
- Outcome and instructor cards — supporting cards surface the named outcome and the instructor's face or credential at a glance
- Dates-or-scarcity card — a card calls out the cohort start date or seats remaining to create concrete urgency
- Primary CTA card — a dedicated card hosts the apply or enroll button so the action is unmistakable
- Single screenful — the mosaic is sized so all cards land before any scroll, giving a fast first impression
Best use cases
- Course creators selling cohorts — bento hero making a flagship cohort feel substantive in one screen
- Coaches running group programs — hero pulling outcome, coach photo, dates, and CTA into one mosaic
- Consultants offering signature workshops — hero packaging a workshop promise plus speaker proof
- Agencies with cohort-based training — bento hero for a team-training intensive
- Memberships with cohort-based onboarding — hero for a flagship intensive inside the community
What you can change with your DNA
When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:
- Colors — slots for the page background, card backgrounds (one or several per card), accent color for the CTA card, and text colors per card type
- Fonts — three roles: a heavy display font for the headline card, a clean body font for outcome and instructor cards, and an accent font for dates and labels
- Copy — program headline, outcome line, instructor name and credential, cohort dates or seat count, and CTA label
- Images — instructor photo, optional product or course mockup, and any small accent imagery for the dates card
- Behavior — tune the number of cards (five, six, seven), the size hierarchy of the mosaic, and whether any card hosts a small animation or stat counter
How remixing works
From "swiped it" to "shipped it" in three steps.
Pick a remix
Browse the library, find one that fits — like this one.
Run it through your DNA
The remix skill uses your CCOS DNA to swap colors, fonts, copy, and structure so it lands as yours.
Ship it
Paste the finished HTML into Thinkific, Kajabi, WordPress, or any platform that takes embed code.
Create a new list
Save your favorites
Email me a magic link and I'll add this to your favorites list.