Now OpenProductive Muslim CertificationApply Now

A. Current — Side-by-Side Grid

Existing BlogFeaturedCard component. Image left, content right.

B. Full-Width Hero

Cinematic background image with text overlay. Bold editorial statement.

C. Stacked Editorial

Wide cinematic image on top, centered content below. Magazine cover feel.

D. Featured + Sidebar

Large featured card with two smaller cards in a sidebar column.

E. Featured Article + Reading Lists Strip

Hero article on top, then a horizontal row of reading list cards below.

F. Reading Lists as Hero

Reading lists take center stage. Large lead card with two supporting cards.

G. Mixed Grid — Article + Reading Lists

Featured article shares the grid with reading list cards. Everything at one glance.

H. Overlapping Editorial

Article-only. Wide image with a content card rising from below — layered depth.

I. Two-Article Spotlight

Article-only. Lead article as hero on left, secondary article as clean card on right. Asymmetric weight.

J. Three-Article Grid

Article-only. Three equal cards in a clean grid. No hierarchy — democratic layout.

K. Article + Reading List CTA

Featured article paired with a single reading list as a distinctive call-to-action card.

Reading List

Ramadan Productivity Guide

A curated collection of articles to help you make the most of Ramadan spiritually and productively.

  • The Power of Fajr: Starting Before the World Wakes
  • How to Use Ramadan to Build Lasting Habits
  • 3 Sunnah Practices That Boost Focus

L. Editorial Shelf

Wide article banner across top, then a shelf mixing one article card and two reading list cards.

N. Editor's Curated Section

Warm cream background band with a mix of article cards and reading list cards. Editor-controlled.

O. Editor's Curated — Image Reading Lists

Same cream band, but reading list cards include an image with a "Reading List" badge overlay.

M. Single Reading List Showcase

One reading list presented as a premium full-width section with article previews.