All Heading Levels

The widget supports all six heading levels with automatic styling:

Heading 1 – Main Title (H1)

This is the largest heading, typically used for the page title in the hero section.

Heading 2 – Major Section (H2)

Used for major content sections and primary divisions in the article.

Heading 3 – Subsection (H3)

Perfect for subsections and secondary content divisions.

Heading 4 – Minor Heading (H4)

Used for smaller divisions and specific topics within subsections.

Heading 5 – Small Heading (H5)

Ideal for very specific topics and minor content groupings.

Heading 6 – Smallest Heading (H6)

The smallest heading level, used for fine-grained content organization.

Paragraphs and Text Formatting

Regular paragraphs use optimal line height and spacing for comfortable reading. This paragraph demonstrates the standard text styling that makes long-form content easy on the eyes.

You can use bold text to emphasize important points, or italic text to add subtle emphasis. You can also combine them: bold and italic together.

Inline code snippets are styled distinctly to stand out from regular text, making technical content easier to read and understand.

Unordered Lists (Bullets)

Bullet lists are styled with custom markers that match the brand colors:

• First bullet point demonstrating the custom styling
• Second bullet point with longer text to show how multi-line items wrap properly with correct indentation
• Third bullet point showing consistency
• Fourth bullet point with even more content to demonstrate that the spacing and alignment work perfectly regardless of how much text is in each item

Ordered Lists (Numbered)

Numbered lists feature beautiful circular badges with automatic numbering:

1. First numbered item with custom circular badge styling
2. Second item demonstrating the automatic counter increment
3. Third item with longer text to show how the numbered badges stay aligned even with multi-line content that wraps to the next line
4. Fourth item completing the sequence
5. Fifth item showing the styling remains consistent

Nested Lists

Lists can be nested within each other:

• Parent item one
  • Child item A
  • Child item B
• Parent item two
  • Child item C
  • Child item D

Blockquotes

Blockquotes are styled with a decorative quote mark and elegant formatting:

The best way to predict the future is to invent it. This blockquote demonstrates how longer quotes are formatted with proper typography, making them stand out as highlighted content within the article.

Alan Kay

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

Winston Churchill

Code Blocks

Code blocks are styled with syntax-friendly colors and proper formatting:

// Example JavaScript function
function greetUser(name) {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

// Call the function
greetUser('World');

Here’s an example with HTML:

<div class="blog-content">
  <h2>Section Title</h2>
  <p>Your content here...</p>
</div>

Links and Navigation

Links are styled with brand colors and smooth transitions. Here’s a sample external link and an internal page link. Links automatically show hover effects to improve user experience.

You can also create lists of links for resource sections:

• Resource One – Complete Guide
• Resource Two – Best Practices
• Resource Three – Advanced Topics

Section Dividers

Use horizontal rules to create visual breaks between major sections:

Content continues after the divider with a clear visual separation.

Tables

Tables are fully responsive with hover effects and clean styling:

Images and Figures

Images support lazy loading and responsive sizes for optimal performance:

Image + Text Layouts (WordPress Blocks)

These layouts use WordPress’s native Media & Text block structure. When you add a Media & Text block in Gutenberg, it will automatically be styled beautifully:

Media & Text Block – Image on Left

Columns Block (Alternative Method)

You can also use WordPress’s Columns block for image + text layouts:

Using Columns Block

The two-column block is another way to create side-by-side layouts. Simply add an image in one column and text in the other.

Both columns are styled automatically and stack on mobile devices.

Real-World Content Example

Here’s how all these elements work together in a real article:

Building Secure Applications

Security is paramount in modern software development. Follow these essential practices to protect your applications:

1. Input Validation:Always validate and sanitize user input
2. Authentication:Implement robust authentication mechanisms
3. Encryption:Use encryption for sensitive data
4. Updates:Keep dependencies up to date

Security is not a product, but a process. It’s more than designing strong crypto into a system; it’s designing the entire system such that all security measures work together.

Bruce Schneier

Here’s a simple example of input validation:

function validateInput(input) {
  // Remove dangerous characters
  const sanitized = input.trim()
    .replace(/[<>]/g, '');
  
  // Validate length
  if (sanitized.length < 3 || sanitized.length > 100) {
    return false;
  }
  
  return sanitized;
}

For more information, check out these resources:

• OWASP Security Guidelines
• SANS Institute Resources

Key Takeaways

Remember these important points:

• Security should be built in from the start, not added later
• Use established libraries and frameworks when possible
• Regular security audits are essential
• Education and training keep your team up to date