Explore typography, color palettes, components, and usage guidelines to create beautiful, consistent interfaces.

Buttons

Button Variations

Buttons are essential for call-to-action elements and navigation. They guide users to take specific actions on your website.

Primary & Secondary Button

You can use buttons in different contexts and styles:

Button with Fill Style

Button with Outline Style

This is a plain button

Heading 1 used for Page Title

This is heading one, the largest and most important heading on your page. Use it for your main page title or primary heading. There should typically be only one H1 per page for optimal SEO and readability.

Heading 2 used for Major Section

This is heading two, perfect for main sections within your content. It provides clear visual hierarchy and helps organize your information effectively for readers. Use H2 for major topics and primary divisions in your content.

Heading 3 for Subsection

This is Heading 3, ideal for subsections under your main sections. It creates a clear content structure that’s both user-friendly and SEO-optimized. H3 headings help break down complex topics into manageable chunks.

Heading 4 for Minor Section

This is Heading 4, which works well for smaller divisions within your content. It maintains readability while providing additional organizational depth. Use H4 when you need further subdivision under H3 sections.

Heading 5 for Detailed Point

This is Heading 5, ideal for very specific points or detailed breakdowns within your content structure. H5 is less commonly used but valuable for highly detailed, technical, or structured content.

Heading 6 for Finest Detail

This is Heading 6, the smallest heading level, perfect for the most granular content divisions. Use H6 sparingly for the finest level of detail in your content hierarchy.

Paragraph Styles

This is a standard paragraph with multiple sentences. The Sophia Theme ensures optimal line height and spacing for comfortable reading. Your content will flow naturally across all devices, providing an excellent user experience whether viewed on desktop, tablet, or mobile.

Here’s another paragraph to show consistent spacing. Good typography creates rhythm and makes your content more engaging and easier to digest.

Unordered Lists (Bullets)

Bullet lists are perfect for presenting information that doesn’t require a specific order. Here are some key features of the Sophia Theme:

Clean and modern design
Fully responsive layout
Easy customization options
SEO-friendly structure

Nested Bullet Lists

You can also create nested lists for more detailed information:

Main Category One
- Subcategory A
- Subcategory B
- Subcategory C
Main Category Two
- Subcategory D
- Subcategory E

Ordered Lists (Numbered)

Numbered lists are ideal for step-by-step instructions or ranked information. Follow these steps to get started:

Download and install the Sophia Theme
Activate the theme in your WordPress dashboard
Customize your site settings
Add your content and pages
Preview your site
Launch and share with the world

Nested Numbered Lists

Here’s a more detailed process with nested numbering:

Initial Setup
1. Install WordPress
2. Choose your hosting
3. Configure basic settings
Theme Installation
1. Upload the theme files
2. Activate the theme
3. Set up customization options
Content Creation
1. Write your pages
2. Add images and media
3. Optimize for SEO

Blockquote

Use blockquotes to highlight important quotes, testimonials, or statements from external sources:

Here’s a standard blockquote example:

“The Sophia Theme has transformed my website into a professional, stunning online presence. The clean design and easy customization make it perfect for my business.”

Here’s a large style blockquote example:

“The Sophia Theme embodies this philosophy perfectly, combining beautiful aesthetics with practical functionality that makes website management a breeze.”

Pull Quote

Pull quotes draw attention to key statements within your content and break up long blocks of text:

“Success is not final, failure is not fatal: it is the courage to continue that counts.”
Winston Churchill

Verse Block

The verse block preserves your exact formatting, including extra spaces between words and line breaks. Your text will appear on the published site exactly as you entered it.

Use verse formatting for poetry, code snippets, or structured text that requires preserved formatting:

In lines of code and pixels bright,
A website comes to life tonight.
With Sophia Theme so clean and true,
Your vision shines in every hue.

Design that flows, content that sings,
The perfect balance technology brings.
From header down to footer's end,
A digital space where ideas blend.

Text Formatting

The Sophia Theme supports various text styles for emphasis and clarity:

Bold text for emphasis
Italic text for subtle emphasis
Bold and italic for strong emphasis
Regular text for standard content

You can also combine these with other elements:

First point with bold emphasis
Second point with italic styling
Regular third point for variety

Details Block (Accordion)

The Details block creates collapsible accordion-style content, perfect for FAQs, additional information, or content you want to hide until users need it:

What is the Sophia Theme?

The Sophia Theme is a beautiful, free WordPress theme designed for creators, bloggers, and businesses. It offers clean design, easy customization, and professional features that help you build stunning websites without any coding knowledge.

How do I install the theme?

Installing the Sophia Theme is simple. Go to your WordPress dashboard, navigate to Appearance > Themes > Add New, upload the theme file, and click Activate. You can start customizing immediately after activation.

Is the theme mobile responsive?

Yes! The Sophia Theme is fully responsive and looks perfect on all devices including desktops, tablets, and smartphones. Your content will automatically adjust to provide the best viewing experience.

Can I customize the colors and fonts?

Absolutely. The Sophia Theme includes a powerful customizer that lets you change colors, fonts, layouts, and more. You can personalize your site to match your brand without touching any code.

Table Block

Tables are perfect for organizing data, comparing features, or displaying structured information in an easy-to-read format:Theme Features Comparison

Pricing Table Example

Plan	Price	Features	Best For
Starter	Free	Basic features, 5 templates	Personal blogs
Business	$49/year	Advanced features, 15 templates	Small businesses
Professional	$99/year	All features, unlimited templates	Agencies & developers
Enterprise	$199/year	Everything + priority support	Large organizations

Simple Data Table

Theme Name	Sophia Theme
Version	1.0.0
Release Date	October 2025
WordPress Version	5.0 or higher
PHP Version	7.4 or higher
License	GPL v2 or later

Two Column Layout

The columns block allows you to create side-by-side content layouts, perfect for comparing information, displaying features, or creating visually interesting page designs:

Left Column

This is the left column content. You can add any type of content here including text, images, lists, buttons, and more. The spacing between columns ensures your content is easy to read and visually balanced.

Feature one with description
Feature two with description
Feature three with description

Learn More

Right Column

This is the right column content. Columns automatically adjust to mobile devices, stacking vertically on smaller screens for optimal readability. The Sophia Theme ensures your columned content looks great everywhere.

Benefit one explained
Benefit two explained
Benefit three explained

Get Started

Three Column Layout

You can also create three or more columns for displaying services, team members, or product features:

Column One

Perfect for showcasing multiple items side by side. Each column gets equal width by default.

Column Two

Add icons, images, or any other content to make your columns more engaging and informative.

Column Three

Columns automatically stack on mobile devices for better readability on smaller screens.

Custom Width Columns

Create columns with different widths for asymmetrical layouts:

Wide Column (66%)

This wider column is great for main content. You can use it for detailed descriptions, articles, or primary information that needs more space. The flexible width system lets you create exactly the layout you need.

Add multiple paragraphs, images, or any other content blocks to fill your space effectively.