Dirigible Support Logo Dirigible Support Reverse Logo
Skip to Content Dirigible Support Logo Dirigible Support Reverse Logo
  • Documentation
  • Block Demos
  • Plugin Demos
  • Knowledgebase

Search documentation

    No results found. Try a block name or setting label.

    Browse

    Docs home
    Theme Blocks
    Plugins
    • AI Alt Text
    • Artworks
    • Blocks Extended
    • Cards
    • Documentation
    • Events
    • Fonts
    • Footer
    • Hours
    • Locations
    • Manifest
    • Mega Menu
    • People
    • Portfolio
    • SEO
    Guides CSS Utilities

    CSS Utilities

    How to use Spacing Sizing Layout Typography Backgrounds Borders Effects States Visibility Animation
    1. Docs

    CSS Utility Classes

    Short class names built into Dirigible Studio. Add one to a block's Additional CSS class(es) field to change spacing, layout, visibility, or motion without writing custom CSS.

    Browse categories in the sidebar, or open How to use for applying classes and breakpoint prefixes.

    Browse

    • How to use Add utility classes to any block to change spacing, layout, visibility, or animation without custom CSS.
    • Spacing Margin, padding, gap, and offset utility classes for blocks.
    • Sizing Width, height, and aspect ratio utility classes.
    • Layout Flex, grid, position, overflow, and object-fit utility classes.
    • Typography Text alignment, size, weight, and list utility classes.
    • Backgrounds Background color, gradient, overlay, and blur utility classes.
    • Borders Border, rounded corner, and shadow utility classes.
    • Effects Opacity, transform, and transition utility classes.
    • States Hover, active, and scrolled-state utility classes.
    • Visibility Show, hide, and responsive visibility utility classes.
    • Animation Load animations, scroll animations, and animation duration classes.

    © Dirigible Studio

    2002 Atwood Avenue Madison, WI, 53704

    • About
      • About Us
      • Contact
      • Terms and Conditions
    • Knowledge Base

    Made in Wisconsin by Dirigible Studio

    See Demo β†’

    Section

    See Demo β†’β†’
    See Demo β†’

    Columns

    See Demo β†’β†’
    See Demo β†’

    Hero

    See Demo β†’β†’
    See Demo β†’

    Tabs

    See Demo β†’β†’
    See Demo β†’

    Counters

    See Demo β†’β†’
    See Demo β†’

    Grid

    See Demo β†’β†’
    See Demo β†’

    Jump Links

    See Demo β†’β†’
    See Demo β†’

    Timeline

    See Demo β†’β†’
    See Demo β†’

    Media Callout

    See Demo β†’β†’
    See Demo β†’

    Lookbook

    See Demo β†’β†’
    See Demo β†’

    Quotes

    See Demo β†’β†’
    See Demo β†’

    Comparison Table

    See Demo β†’β†’
    See Demo β†’

    Link in bio

    See Demo β†’β†’
    See Demo β†’

    Landing Page

    See Demo β†’β†’
    See Demo β†’

    Photo Feature

    See Demo β†’β†’
    See Demo β†’

    Call to Action

    See Demo β†’β†’
    See Demo β†’

    Site Preview

    See Demo β†’β†’
    See Demo β†’

    Voronoi

    See Demo β†’β†’
    See Demo β†’

    Marquee

    See Demo β†’β†’
    See Demo β†’

    Cards

    See Demo β†’
    See Demo β†’

    Events

    See Demo β†’
    See Demo β†’

    Locations

    See Demo β†’
    See Demo β†’

    People

    See Demo β†’
    See Demo β†’

    Artworks

    See Demo β†’
    Skip to Content
    • Documentation
    • Block Demos
    • Plugin Demos
    • Knowledgebase