Skip to content
All Components

Component Showcase

A reference of all UI components, patterns, and styles used throughout the theme.

Design System

Color Tokens

--color-bg
--color-surface-1
--color-surface-2
--color-surface-3
--color-accent-start
--color-accent-end
--color-accent-solid
--color-text-primary
--color-text-secondary
--color-border
--color-border-strong
--color-success
--color-warning
--color-error
--color-info

Surface Elevation

bg (base)
surface-1
surface-2
surface-3

Typography

Hero Plus Jakarta Sans 800 clamp(2.75rem, 5.5vw, 4rem)

Hero Heading (gradient)

H2 Plus Jakarta Sans 700 clamp(1.5rem, 3vw, 2rem)

Section Heading h2

H3 Plus Jakarta Sans 600 clamp(1.25rem, 2.5vw, 1.5rem)

Subsection Heading h3

H4 Plus Jakarta Sans 600 1.125rem

Label Heading h4

Body Manrope 400 1rem / 1.65

Body text in Manrope. The quick brown fox jumps over the lazy dog. This is what regular paragraph text looks like across the site.

Small Manrope 400 0.875rem

Small text for captions, metadata, and secondary information.

Mono JetBrains Mono 400 0.875rem / 1.6
const theme = 'catalyst';
console.log(`Running ${theme}`);
Inline Mixed styles

This is a link inside body text. And some bold text and italic text for emphasis. Inline code uses JetBrains Mono.

Code Block

catalyst.js
// Dark theme, bright results
function catalyst(options) {
    const theme = 'dark';
    const accent = '#6366f1';

    return {
        theme,
        accent,
        render: () => `Catalyst ${theme} mode`
    };
}

Buttons

Toggle Buttons


Metric Badges

+73% Faster 4x Throughput 99.97% Uptime $420K Saved

Theme Components

Post Cards


Case Study Cards


Service Cards


Testimonials

Patient wait times down 35%, bed utilization up 28%. Catalyst delivered a healthcare AI solution that actually works in the real world.
Dr. Priya Sharma, Chief Digital Officer — Regional Health Partners
Their digital twin implementation exceeded our projections by 40%. Catalyst's team understood manufacturing operations, not just technology.
Marcus Rivera, CEO — NovaTech Manufacturing
Catalyst transformed how we approach technology investment. Their AI strategy work delivered 4.8x ROI in the first year.
Sarah Chen, CTO — Meridian Financial Group

Category Cards

Blog

Thought leadership articles on digital transformation, AI strategy, and technology advisory. Insights from our consulting practice.

Case Study

Client success stories showcasing measurable results from our digital transformation and AI strategy engagements.

Industry Insights

Deep dives into industry trends, market analysis, and sector-specific digital transformation strategies. Data-driven perspectives for decision-makers.

Service

Our advisory and consulting service offerings spanning digital transformation, AI strategy, and technology modernization.


Ghost Editor Cards

All Ghost editor card types styled for this dark theme. These cards are rendered from the Ghost editor content helper.

Image Cards

Circuit board close-up
This is an image card with a caption — circuit board close-up
Digital world visualization
Wide image card (kg-width-wide)
Cybersecurity visualization
Full bleed image card (kg-width-full)

Embed Cards

Bookmark Card

Ghost - The Professional Publishing Platform
Ghost is a powerful app for professional publishers to create, share, and grow a business around their content.

Callout Cards

💡
This is a callout card. Use it to highlight important information or tips for your readers.
⚠️
Warning callout — draws attention to critical information that could cause problems.
Success callout — confirms a positive outcome or best practice.
📝
Note callout — additional context or helpful information to keep in mind.
📎
Grey/neutral callout — supplementary detail or aside.

Toggle Cards

What is a toggle card?

Toggle cards let readers expand and collapse content sections. Great for FAQs or detailed explanations that not everyone needs.

How does it look when expanded?

The content area appears below the heading with a smooth reveal. Content can include paragraphs, lists, and other formatted text.

Button Card

Header Cards

This is a Header Card

With a subheading below - great for section breaks or full-width callouts

Header Card with Background Image

The image darkens behind the text for readability

Audio Card

Podcast cover
Podcast Episode: Building Ghost Themes
12:34 / 35:20

Video Card

Video thumbnail
0:00 / 4:32

Building dark-mode Ghost themes with gradient accents

File Card

Product Card

Catalyst Ghost Theme

Catalyst Ghost Theme

Premium dark-mode Ghost theme for digital consultancies. Gradient accents, case study templates, membership integration.

Buy — $89

Signup Card

Embed card — supports YouTube, Vimeo, Twitter, CodePen, maps, and more

Content Elements

Blockquote

"The best themes don't just look good - they make content shine. Every design decision should serve the reader's experience."

Aside (Pull Quote)

Dark mode isn't just an aesthetic choice - it's a statement about who your audience is and how they work.

Horizontal Rule


Lists

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three with bold text
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three with a link

Table

FeatureFreePro
Blog postsUnlimitedUnlimited
Case studies3Unlimited
Custom branding

Portal & Membership

Authentication flows, newsletter forms, pricing tiers, content gating, and member account states.

Sign In Form

Welcome back

Sign in to your account with a magic link — no password needed.

Don't have an account? Sign up

Sign Up Form

Create your account

Create a free account to get access to articles, newsletters, and more.

Already a member? Sign in

Now check your email!

A sign-in link has been sent to your email. Click the link to continue — no password needed.

Newsletter Subscription

Subscribe to our newsletter

Stay updated with our latest insights and articles.

Now check your email!

Standalone Newsletter Form

No spam. Unsubscribe anytime.

Pricing Tiers

Free

Access to free content and insights

Free
  • Weekly newsletter with industry insights
  • Access to all blog articles
  • Case study summaries and key metrics
Sign up free

Content Gate

Logged Out

This is a preview of a gated article. The full content is hidden behind the paywall below...

This article is for subscribers

Get access to premium articles, exclusive newsletters, and the full archive.

Subscribe Now

Already a member? Sign in

Needs Upgrade

Logged in as a free member, but this post requires a paid subscription...

Unlock the full article

This post is for paid subscribers. Upgrade to get full access.

View plans

Member Account States

Nav — Logged out

Nav — Logged in

Jane Doe Member avatar

Nav — Sign out


Custom Interactions

Table of Contents

Post content area

The TOC sidebar appears alongside long-form content. It scans h2/h3 headings and builds a navigable list with scroll-spy highlighting. The active item updates as the reader scrolls through sections.

Scroll Reveal

Elements with class .reveal fade in when they enter the viewport. Uses IntersectionObserver with threshold: 0.1.

.reveal (before) — opacity: 0, translateY(12px)
.reveal.is-visible (after) — opacity: 1, translateY(0)

Horizontal scroll gallery with snap points. Scroll or drag to navigate.

Pagination

Page Templates

Homepage

Hero with particle animation, client logos, case studies, services, testimonials, and blog preview.

index.hbs

Blog Post

Feature image hero, TOC sidebar, share links, author card, and related posts.

post.hbs

Static Page

Full-width content page for generic pages.

page.hbs

Blog Listing

Listing hero with post card grid and pagination.

custom-blog.hbs

Case Study

Metric badges, TOC sidebar, and related case studies.

custom-case-study.hbs

Case Studies List

Listing hero with case study card grid.

custom-case-studies-list.hbs

Service Detail

Service content page with related services.

custom-service.hbs

Services List

Listing hero with service card grid.

custom-services-list.hbs

Sign In

Magic link email authentication form.

custom-signin.hbs

Sign Up

Member registration with email and name.

custom-signup.hbs

Account

Member dashboard with plan, billing, and sign out.

custom-account.hbs

Component Showcase

Living style guide with all UI components and patterns.

custom-components.hbs

Tag Archive

Tag hero with filtered post grid.

tag.hbs

Author Page

Author bio, social links, and post grid.

author.hbs

Default Layout

Base layout with header, footer, and meta tags.

default.hbs

404 Error

Custom page not found error with navigation.

error-404.hbs