Complete Styling Guide

This article demonstrates all the enhanced styling features available in Knowledge Base articles. Use this as a reference when creating your own content.

Styled Headings

Headings are styled with visual hierarchy to help readers navigate through content easily. Notice the purple left border on H2 headings.

This is a Heading 3

H3 headings are slightly smaller and used for subsections within a topic.

This is a Heading 4

H4 headings are used for minor subsections when you need even more granularity.

Enhanced List Styling

Unordered Lists

Bullet points use custom purple dots for a polished look:

Ordered Lists

Numbered lists feature gradient purple badges:

Code Blocks with Copy Button

Inline Code

Use inline code for small snippets like console.log(), variable names like $userId, or commands like npm install.

Code Block Example

Code blocks have a dark theme with a Copy button in the top-right corner:

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

// Usage
greetUser("WorkSpace Pro User");

Try clicking the Copy button above! Here's another example with PHP:

// PHP Example
class UserController extends Controller
{
    public function index()
    {
        $users = User::where('status', 'active')
            ->orderBy('created_at', 'desc')
            ->paginate(20);

        return view('users.index', compact('users'));
    }
}

Callout Boxes

Blockquotes are automatically styled based on their first word. Use these to highlight important information:

Info/Note Callout (Blue)

Note: This is an informational callout. Start your blockquote with "Info:" or "Note:" to get this blue styling. Great for additional context or FYI content.

Warning/Caution Callout (Amber)

Warning: This is a warning callout. Use "Warning:" or "Caution:" at the start. Perfect for alerting users about potential issues or important considerations.

Tip/Success Callout (Green)

Tip: This is a tip callout. Start with "Tip:" or "Success:" for this green styling. Ideal for helpful suggestions and best practices.

Regular Blockquote

This is a regular blockquote without a special prefix. It uses the default purple styling with a quote icon. Perfect for quotes or highlighted text.

Tables

Tables are styled with borders, hover effects, and clean typography:

Links and Typography

Links are styled in purple with underline: Visit the Knowledge Base. The underline offset makes them more readable.

You can also combine bold text, italic text, and inline code for rich formatting.

Images with Lightbox

Click any image to view it in full-size lightbox mode. Press Escape or click outside to close.

Note: Add images to your articles using the editor. Clicking on them will open the lightbox.

Reading Progress Bar

Notice the purple progress bar at the very top of the page? It shows your reading progress through this article. As you scroll, it fills up to indicate how much content you've read.

Best Practices for Content Authors

Tip: This demo article itself serves as a template. Feel free to copy sections when creating your own articles!

Summary

This article showcased the following styling features:

Happy documenting!