Left Column

This is a standard two-column layout with equal widths. Perfect for side-by-side comparisons.

Right Column

Both columns take up 50% of the available space, creating a balanced, symmetrical appearance.

Sidebar

📌 Icon

🔖 Tag

📝 Note

Main Content Area

This layout is great when you want a narrow sidebar for icons, labels, or navigation, with the main content taking up most of the space. Commonly used for documentation or blog layouts.

• Point 1: More detailed information

• Point 2: Extended explanations

• Point 3: Additional context

Primary Content

This is the main content area that takes up most of the width. Use this when your left content is more important and needs more space for detailed information, images, or lengthy text.

This could be an article, tutorial, or main documentation section.

Sidebar Info

💡 Tips

⚠️ Warning

✅ Done

📊 Stats

Description

Two-column layouts are perfect for pairing images with descriptions. The visual on the left draws attention while the text on the right provides context.

Key Features:

• Visual appeal

• Easy to scan

• Professional look

function example() {

return "code";

}

Code Explanation

This function demonstrates a simple return statement. Two columns work great for code tutorials!

Column 1

🚀 Feature A

Quick and fast deployment

Column 2

🔒 Feature B

Secure by default

Column 3

✨ Feature C

Beautiful UI

Left Nav

🏠 Home

📊 Data

⚙️ Settings

Main Content Area

This layout emphasizes the center column for your primary content, while keeping navigation or supplementary info in the narrower side columns.

Perfect for:

• Dashboards with side navigation

• Articles with related content in sidebars

• App interfaces with tools on sides

The center column dominates the visual hierarchy.

Right Info

📌 Pinned

🔔 Alerts

💬 Chat

Primary Section

The left column takes up half the space, perfect for main content, while the two right columns share the remaining space for supporting information.

• Main article content

• Featured information

• Primary focus area

Info 1

📅 Date

👤 Author

🏷️ Tags

Info 2

👍 Likes

💬 Comments

🔗 Share

❶ Step 1

Plan your project

✅ Define goals

✅ Set timeline

❷ Step 2

Execute the plan

✅ Build features

✅ Test thoroughly

❸ Step 3

Launch & iterate

✅ Deploy

✅ Gather feedback

Q1

📈 Growth

+15%

Q2

📈 Growth

+22%

Q3

📈 Growth

+18%

Q4

📈 Target

+25%

Main Overview

This layout gives prominence to one column while keeping three smaller columns for quick stats or icons.

Perfect for dashboards!

Stat 1

👥

1,234

Users

Stat 2

📊

567

Posts

Stat 3

⭐

89

Likes

💡

Innovation

Cutting edge tech

🔒

Security

Enterprise grade

⚡

Speed

Lightning fast

🌐

Global

Worldwide CDN

2020

🌱 Founded

Started with vision

2021

🚀 Launched

First product

2022

📈 Grew

1000+ customers

2023

🏆 Success

Market leader

Mon

📅

Planning

Tue

💻

Development

Wed

🔍

Testing

Thu

📦

Deployment

Fri

🎉

Celebration

1 Star

⭐

Poor

2 Stars

⭐⭐

Fair

3 Stars

⭐⭐⭐

Good

4 Stars

⭐⭐⭐⭐

Great

5 Stars

⭐⭐⭐⭐⭐

Excellent

🔴

Critical

Fix now

🟠

High

Fix today

🟡

Medium

This week

🔵

Low

This month

⚪

Info

No rush