Using magic classes

  • advanced
  • css
  • magic-classes
  • block-editor
  • animations

Magic classes are short class names built into Dirigible Studio. Type one into a block's settings and the theme styles it for you: more space above, hidden on phones, a fade-in as visitors scroll. You don't write any CSS.

Add a class to a block

  1. Select the block in the editor.
  2. In the sidebar, expand Advanced at the bottom of the block settings.
  3. Type the class name in Additional CSS class(es). Separate several classes with spaces, for example mt-8 scroll-animate-fade.
  4. Click Update and check the live page.

Type class names exactly as shown, without a leading dot or commas.

The full class reference is in CSS Utility Classes. Dashboard → Magic Classes in WordPress lists the most common ones. The tables below cover the ones builders use most.

Spacing

Margin is space outside the block; padding is space inside it. Each number step adds 0.25rem, so mt-4 adds 1rem and mt-8 adds 2rem.

Class What it does
mt-0, mb-0, m-0 Removes the space above, below, or all around the block
pt-0, pb-0, p-0 Removes the inner space at the top, bottom, or all sides
mt-1 to mt-8 Adds space above the block
mb-1 to mb-8 Adds space below the block
py-1 to py-8 Adds inner space at the top and bottom
px-1 to px-8 Adds inner space on the left and right
mt-block, mb-block, my-block Adds the same gap the theme puts between blocks
!mt-0, !mb-0 Removes spacing even when another style keeps adding it back

Show or hide on different screens

Class What it does
hidden Hides the block on every screen size
sm:hide Hides on phones (narrower than 640px)
md:hide Hides on phones and small tablets (narrower than 768px)
lg:hidden Hides on tablets and larger (768px and up)
xlg:hidden Hides on desktop screens (1024px and up)
hide lg:block Shows the block only on tablets and larger

Use hide, not hidden, when you pair it with a class that shows the block again. hidden always wins.

The lg: prefix (768px and up) and xlg: prefix (1024px and up) work with many other classes too. lg:mt-0 removes the top margin only on larger screens, and lg:text-left left-aligns text from tablet width up.

Layout

These are most useful on a Group block or any block that holds other blocks.

Class What it does
flex Lines up the blocks inside in a row
flex-col Stacks them in a column
flex-wrap Lets items drop to a new line when they run out of room
items-center Lines items up along their vertical middle
justify-between Pushes items to the far ends with space between them
justify-center Centers items across the row
flex-center Centers items both across and up and down
w-full, w-1/2, w-1/3 Sets the width to full, half, or a third
sm:w-full Full width on phones only

Look

Class What it does
rounded Rounds the corners to match your site's corner style
rounded-none Square corners
shadow-1 to shadow-3 A soft shadow, from light to stronger
b-subtle A thin, light border
text-center Centers text
uppercase All capital letters
color-primary, color-accent Text in a palette color (also color-secondary, color-variant, color-text, color-white)
bg-primary, bg-gray Background in a palette color (also bg-secondary, bg-accent, bg-dark, bg-white)
rs-links Links inside use the regular text color with no underline. Handy for card rows and logo grids

Animation

Class What it does
fade-in Fades in when the page loads
scroll-animate-from-bottom Slides up into place as it scrolls into view
scroll-animate-fade Fades in when scrolled into view, with no movement
scroll-animate-pop-in Rises with a small springy pop. A good default for cards
scroll-animate-children Put it on a parent block, such as Columns. Each block inside animates in one after another
animate-2s, animate-5s Slows an animation down

Animations need Load Animations and Scroll Animations turned on under Appearance → Customize → Settings → Animations. Both are on by default. Visitors who have asked their device to reduce motion don't see scroll animations.

Combine classes

Stack classes on one block to get several effects at once:

  • scroll-animate-from-bottom mb-8: slides in, with extra space below
  • hide lg:block: a block that only appears on larger screens
  • flex items-center justify-between flex-wrap: a row of items spread edge to edge that wraps on small screens

Tips

  • If a class seems to do nothing, check the spelling first. Then check whether a sidebar setting is doing the same job, such as a Section's Padding. For spacing, try the ! version.
  • Magic classes cover common tweaks. For a look they don't cover, add your own class name and style it in Additional CSS. To style one Section only, use Section block CSS.
  • More on animations and where to find the reference page: Magic Classes and Scroll Animations.