Inline Styling Examples in Zolt

Basic Inline Styling

Using ||text||{attr} to style text spans:

Multiple Styles

Combining multiple attributes:

Text Sizing

Different text sizes:

Font Styling

Font variations:

Colors

Color examples:

Backgrounds

Background styling:

Borders

Adding borders:

Text Alignment

Alignment within inline spans (works in block contexts):

Left aligned

Center aligned

Right aligned

Combined Examples

Emphasis and Color

The quick brown fox jumps over the lazy dog.

Code References

Use the print() function to output text.

The status command shows system status.

Labels and Badges

Inline Code Blocks

Text Highlights

In this paragraph, certain words are highlighted to draw attention to them.

Practical Use Cases

Documentation

The --verbose flag enables detailed output.

Technical Writing

The CPU (Central Processing Unit) is the brain of the computer.

User Interface

Click Save to save your changes.

Cancel to go back.

Status Indicators

Warnings and Tips

Warning: This action cannot be undone!

Tip: Use keyboard shortcuts to save time!

Emphasis in Sentences

The key to success is consistency and perseverance.

Nested Inline Styling

You can nest inline styling:

This is bold and colored within more styled text

Complex Examples

Product Feature

Feature: Dark Mode

Supports automatic theme switching

Version Information

Code Snippet with Syntax

The Array.map() method creates a new array by calling a function on every element.

Price Display

Progress Indicators

Progress: 75%

Accessibility Labels

Visually hidden but accessible (screen reader only) : ""

Note: sr-only=true is an alias for visually-hidden=true for compatibility with other frameworks.

Creative Uses

Highlighting Key Terms

In computer science, a variable is a storage location with an associated name.

Emotional Text

Flow and Emphasis

The main reason for using Zolt is its simplicity and power.

Text Watermarks

← Back to Examples Index