Content Template Showcase

A collection of reusable content modules and layout patterns for building consistent, beautiful pages across the application.

Layout Pattern

Two Column Layout

Text on the Left

This module demonstrates a two-column layout with text content on the left side. The content flows naturally and maintains excellent readability across all device sizes. Multiple paragraphs can be stacked vertically, creating a natural reading flow that guides the user through your content while the visual element on the right provides context and visual interest.

Image / Visual
Reversed Pattern

Reversed Layout

Image on the Left

The same two-column pattern can be reversed to create visual variety across your page. This prevents monotony and keeps users engaged as they scroll. Alternating the layout direction between sections creates a dynamic, magazine-style reading experience.

Image / Visual
Feature Showcase

Text with List

Feature Descriptions

This layout pairs descriptive text with a bulleted list of features, benefits, or key points. It's perfect for feature pages, product descriptions, or highlighting capabilities. The list on the right provides scannable, digestible information while the text provides context and narrative flow.

Key Features

  • Enterprise-grade security and encryption
  • Real-time collaboration and updates
  • Advanced analytics and reporting
  • 24/7 customer support
  • Seamless integrations with popular tools
Benefits First

List on the Left

Benefits First

Sometimes it's more effective to lead with the benefits or features first, letting users quickly scan what matters most before diving into the detailed explanation. This reversed pattern works particularly well when you want to highlight specific value propositions before providing the supporting narrative.

Benefits

  • Increase productivity by 10x
  • Lightning-fast performance
  • 99.9% uptime guarantee
  • Award-winning customer support
  • Scales with your business
Focus Mode

Full Width Content Block

Centered, Focused Reading

When you need to focus attention on important content, a full-width centered block provides the perfect solution. This layout is ideal for in-depth explanations, policies, or detailed documentation.

The narrower column width ensures optimal readability by keeping line lengths comfortable. This is particularly important for long-form content where reading fatigue can be an issue.

This modular approach allows you to mix and match different content blocks to create engaging, well-structured pages that guide users through your information hierarchy naturally.

Highlighted Content

You can add emphasis to important sections by using background colors or borders. This draws the eye and helps break up longer content into digestible chunks.

  • First important point to remember
  • Second key takeaway for users
  • Third essential element to consider

Typography Scale

H1 Heading

text-5xl md:text-6xl font-bold with gradient animation (page-title class)

H2 Heading

text-4xl font-bold text-primary (section-title class)

H3 Heading

text-2xl font-semibold (subsection-title class)

H4 Heading

text-xl font-semibold (minor-title class)

Large body text (text-lg)

Used for emphasis or lead paragraphs (text-lead class)

Regular body text (text-base)

Default paragraph text size

Button Styles

Primary Buttons

Secondary Buttons

Outline Buttons

Ghost Buttons

Button Sizes

Special Buttons

List Styles

Icon List

  • Feature one
  • Feature two
  • Feature three
  • Feature four

Numbered List

  1. 1First step
  2. 2Second step
  3. 3Third step
  4. 4Fourth step

Code Examples

Inline Code

Use inline code for short snippets within text, like npm install or className="..."

Code Block

// Example JavaScript function
const calculateTotal = (items) => {
  return items.reduce((sum, item) => {
    return sum + (item.price * item.quantity);
  }, 0);
};

// Usage
const total = calculateTotal(cartItems);
console.log(`Total: $${total}`);

Code with Filename

src/components/Example.tsx
1import React from 'react';
2
3export const Example = ({ title, children }) => {
4  return (
5    <div className="container">
6      <h1>{title}</h1>
7      {children}
8    </div>
9  );
10};

Highlight Styles

Inline Text Highlights

You can highlight important words or phrases like this with primary color to draw attention to key concepts in your content.

Or use different colors: accent highlights, yellow highlights, or success highlights for variety.

šŸ’” Pro Tip

This is an info highlight box. Use it to draw attention to helpful tips, important notes, or additional context that enhances understanding.

āš ļø Warning

Warning highlights call attention to potential issues, caveats, or things users should be careful about. Use sparingly for maximum impact.

āœ… Success

Use success highlights to confirm positive outcomes, completed steps, or best practices that lead to great results.

"This is a blockquote or emphasized text section. Perfect for testimonials, important quotes, or statements that deserve special attention."

ā€” Attribution or source

Ready to Get Started?

Join thousands of users already transforming their workflow with our platform.

Start Free TrialView Demo

Need Help Getting Started?

Our team is here to guide you through setup and answer any questions you have about the platform.

Contact Sales

Available 24/7

Live chat support

Questions About Our Service?

Get in touch with our team to learn more about how we can help your business grow.

Get in Touch