Styling Examples

Default Styled Components

This section shows components with our global theme applied.

Standard Card

This card uses our default theme styling.

Custom Styled Components

This section shows components with custom Tailwind classes applied.

Highlighted Card

This card has custom background and border styling.

def example():
    # This code block uses our syntax highlighting
    return "Hello, UnivAI!"

Complex Layouts

Main Content

Primary content area spanning 8 columns

Sidebar

Sticky sidebar spanning 4 columns

Code Examples

def example():
    """
    Example with custom syntax highlighting
    that adapts to dark mode
    """
    return "Hello, UnivAI!"

Dark Mode Compatible

This card adapts to dark mode automatically