Now OpenTie Your Camel™Apply Now

Now OpenTie Your Camel™Apply Now

Card Components

Every card and content component used across the blog listing, article pages, and topic pages.

1

Article Cards

Cards that represent a single article. Used on /blog, topic pages, and search results.

Featured Card

BlogFeaturedCard Slot: L Used on: /blog

Side-by-side image + content. Editorial presence for the lead article. Stacks vertically on mobile.

Featured Card (No Excerpt)

BlogFeaturedCard Slot: L Variant

Same featured card but without the excerpt. Tighter, more headline-driven.

Standard Card

BlogCard Slot: M Used on: /blog, /topic/*

Vertical image-on-top card. The workhorse — used in grids everywhere. Shows image, topic, title, excerpt, and meta.

Standard Card (No Excerpt)

BlogCard Slot: M Variant

Without excerpt — tighter, headline-driven. Divider removed.

Standard Card (Minimal)

BlogCard Slot: M variant="minimal"

No border, background, shadow, or hover lift. Dividers handled by container. With excerpt, without excerpt, and without topic label.

Hero Card

BlogHeroCard Slot: L Used on: /blog featured

Full background image with dark scrim and white overlay text. Cinematic editorial feel. Best for the lead story.

Compact Card

BlogCompactCard Slot: S Used on: /blog featured (stacked)

Horizontal thumbnail + text. Stacked in narrow columns.

Related Articles

BlogCard No Excerpt Used on: article pages

Uses the Standard Card (no excerpt) for the "Keep Reading" section at the end of articles.

Keep Reading

Search Result Card

ArticleResult Used on: search modal

Horizontal layout with small thumbnail, title with highlighted terms, and excerpt. Used in the search dropdown results.

The Weight of Time: Measuring Time Beyond the Clock
I want to propose seven dimensions through which we can measure and increase the weight of our time. Think of these as seven scales nested within each other.
How Getting a Chicken Roll Can Be an Act of Worship
Before every action, they needed to pause and ask themselves, 'How can I please Allah SWT through this?'
2

Reading List Cards

Cards for curated reading list collections.

Reading List Card Variants

Slot: M Used on: /blog featured, /blog reading lists

Three variants: badge on image (cream bg), label above title (cream bg), label above title (white bg).

A. Badge on Image
Ramadan Productivity Guide Reading List

Ramadan Productivity Guide

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

12 articles →
B. Label Above Title
Ramadan Productivity Guide
Reading List

Ramadan Productivity Guide

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

12 articles →
C. Label Above Title (White)
Ramadan Productivity Guide
Reading List

Ramadan Productivity Guide

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

12 articles

Curated Reading List Card

Slot: M Used on: /blog curated section (cream bg)

Text-only card with orange left border accent. No image — sits on cream background in the curated section. Shown here on cream to match context.

Reading List

Ramadan Productivity Guide

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

12 articles →

Reading List Card (Icon)

Slot: M Used on: /blog reading lists section

Text-only card with book icon. White background, subtle border. Used in the standalone Reading Lists grid on the blog page.

Ramadan Productivity Guide

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

12 articles →
3

Article Page Components

Components used within and around article content — author, topics, sharing, engagement.

Topic Label

TopicLabel Used on: cards, article headers

Clickable topic/tag label. Uppercase, orange text. Links to the topic page.

Barakah Culture Productivity Spirituality Time Management

Article Tags

ArticleTags Used on: end of article

Inline flow list of topics displayed at the end of articles. "Topics:" prefix with comma-separated links.

Topics:Barakah Culture,Productivity,Time Management,Spirituality

Author Card

AuthorCard Used on: end of article

Author attribution with avatar, name, and bio. Uses a top divider. Part of the end-of-article zone.

Social Share

SocialShare Used on: article pages

Share buttons for X, Facebook, LinkedIn, WhatsApp, and copy link. Two variants: full (with labels) and compact (icons only).

Full
Compact

Discussion / Comments

ArticleDiscussion Used on: article pages

"Join the Conversation" section. Shows comment previews from Circle community with avatars, names, and a compose link. Falls back to empty state with CTA.

Join the Conversation

3
A
Ahmed K. 2 days ago

This article really changed how I think about measuring the quality of my time. JazakAllahu khairan!

S
Sara M. 1 day ago

The seven dimensions framework is brilliant. I've started journaling about it.

Share your thoughts...
4

Navigation & Utility

Pagination, search, and placeholder components.

Pagination

Pagination Used on: /topic/* pages

Page numbers with prev/next. Ellipsis truncation for more than 5 pages. Mobile shows prev/next only.

Search Bar

SearchBar Used on: /blog header

Pill-shaped search trigger. Light and dark variants. Opens the search modal on click.

Light
Dark

Image Placeholder

ImagePlaceholder Used on: cards without images

Category-colored placeholder with dot pattern and label. Shown when an article has no featured image.

Productivity
Spirituality
Time Management
Health
5

CTA Components

Newsletter signup and call-to-action blocks.

Newsletter CTA

NewsletterCTA Used on: /blog, article pages

Newsletter signup block. Three variants: navy (dark background), orange (warm tinted), and blended (transparent with dividers for inline use).

Navy

Newsletter

Get Weekly Insights

Faith-driven insights on productivity, growth, and purposeful living. Delivered weekly.

Join 50,000+ readers · No spam, ever

Orange

Newsletter

Get Weekly Insights

Faith-driven insights on productivity, growth, and purposeful living. Delivered weekly.

Join 50,000+ readers · No spam, ever

Blended

Newsletter

Get Weekly Insights

Faith-driven insights on productivity, growth, and purposeful living. Delivered weekly.

Join 50,000+ readers · No spam, ever