🔒 Premium Site Page

Content Hub Listing Page — Featured-Plus-Grid Variant

A content hub page that pairs a featured post at the top with a card grid of recent articles below, plus category navigation for filtering — pilots a recipe blog but the pattern fits any creator who needs a SEO-friendly content library.

Best for: Content hub or blog listing pages where the most important article should anchor the page and the rest should sit in a scannable grid.

Live preview — scroll inside the frame to see the full page.

What it does

  • Featured post hero — full-width imagery and headline anchor the most important article at the top of the page
  • Card grid for recent posts — clean cards with thumbnail, title, category, and date in a responsive grid
  • Category filter or tab nav — visitors can slice the grid by topic without leaving the page
  • Consistent editorial styling — every card follows the same template so the grid reads as one library
  • Footer pagination or load more — extends the grid for visitors who want to keep reading

Best use cases

  • Course creators — content marketing hub that drives organic traffic and email signups
  • Coaches and consultants — article library and case study index
  • Food and lifestyle creators — recipe and journal page
  • Memberships — public-facing content sample that drives signups
  • Authors and creators — essay and article archive

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 — page background, card backgrounds, category tag colors, and accent for hover states. Swap for any brand register.
  • Fonts — two roles: a serif for article titles and a clean sans for category tags, dates, and body
  • Copy — featured post headline and tease, individual card titles and categories, page intro, and filter labels
  • Images — featured post hero image and individual post thumbnails. Consistency in size and crop is what makes the grid feel polished.
  • Behavior — control how many posts show before the load-more action, and tune category filter behavior

How remixing works

From "swiped it" to "shipped it" in three steps.

01

Pick a remix

Browse the library, find one that fits — like this one.

02

Run it through your DNA

The remix skill uses your CCOS DNA to swap colors, fonts, copy, and structure so it lands as yours.

03

Ship it

Paste the finished HTML into Thinkific, Kajabi, WordPress, or any platform that takes embed code.