On this page: How to use | Text | Layout | Lists | Spacing | Effects | Editorial | Navigation | Shortcodes
Custom
A reference for the custom utility classes and shortcodes built into this site.
Utility classes are small, single-purpose helpers you can add to any block when the editor’s own settings don’t cover what you need.
Classes (manually applied)
How to use a manual class
Select the block, go to Settings sidebar (right side) > Advanced. Type the class name into Additional CSS class(es). Separate multiple classes with a single space, for example mb-0 hide-on-mobile.
A few of these are only meant for the navigation menu or for specific patterns; those are called out where they appear below.
Text & typography
balanced— Evens out the line lengths so a heading doesn’t end in one stranded word. Best on short headings.bold— Forces font to be bold on the whole block.has-separator— Draws a short vertical rule after the block, for separating items sitting side by side in a row.is-style-narrow— Caps the width at 760px so lines stay comfortable to read.
On a Group block it narrows the contents rather than the group itself, and follows the group’s left, center or right justification.fs-small— Sets the text to the small body size.fs-hero— Sets the text to the largest display size used by hero headlines.meta— Formats a row of small print (post date, categories, and similar) as uppercase, slightly bolder, wrapping onto a second line when it runs out of room.meta-term— Picks a single term out of a meta row in the accent color and a heavy weight.pretty— Prevents orphans and awkward gaps in longer text. Best on body copy.
Lists
These apply to the List block only, and each collapses back to a single column on small screens (600px and under).
columns-2— Splits the list into two columns.columns-3— Splits the list into three columns.columns-4— Splits the list into four columns.
Layout & visibility
mobile-only— Shows the block on mobile and hides it on tablet and desktop (782px and up).hide-on-mobile— The opposite: hides the block on mobile (781px and down) and shows it everywhere else.sticky— Pins the block in place while the rest of the page scrolls past it, leaving room at the top for the fixed header. Only applies on tablet and desktop; on mobile the block scrolls normally.flex-grow— Lets the block stretch to take up the leftover space in a horizontal row.justify-space-between— Pushes the items in a row out to the far edges with the space shared evenly between them. Add this to the row itself, not the items.frame— Adds a thin, light border around the block.has-diagonal-pattern— Reserved for a Cover block using the diagonal background graphic. It removes the section’s side padding and enlarges and repositions the graphic so the diagonal sweeps behind the content, adjusting at each screen size. Not a general-purpose class.
Spacing
Spacing classes are built from three parts: what to space (m for margin, the space outside a block; p for padding, the space inside it; gap for the space between items in a row or grid), which side, and how much. So mt-md is a medium margin on top, and px-lg is a large padding on the left and right.
These classes always win over the block’s own spacing settings, which makes them a reliable way to fix a stubborn gap — but it also means the sidebar’s spacing controls will stop having any effect on that side. The sizes below are shared by every class in this section:
0— nonexs— 4pxsm— 8pxreg— 16pxmd— 24pxml— 32pxlg— 80pxxl— 120px
Margin is the space outside the block. Add any size from the list above to one of these prefixes.
m-{x}— all four sides,
e.g.m-mdmx— left and right,-{x}
e.g.mx-regmy— top and bottom,-{x}
e.g.my-lgmt— top only-{x}mr— right only-{x}mb— bottom only,-{x}
e.g.mb-0to close up the gap under a blockml— left only-{x}
Margins have one extra size the others don’t: auto, which lets the browser share out whatever space is left. mx-auto centers a block that is narrower than its container, m-auto centers it in both directions, and my-auto centers it vertically.
Padding is the space inside the block, between its edge and its content. Most useful on Group and Cover blocks that have a background color.
p— all four sides,-{x}
e.g.p-mdpx— left and right,-{x}
e.g.px-0to let content run to the edgepy— top and bottom,-{x}
e.g.py-lgpt— top only-{x}pr— right only-{x}pb— bottom only-{x}pl— left only-{x}
There is no auto option for padding.
Gap is the space between items inside a block. Add it to the container — a Group set to a row, a Buttons block, a Columns block, or a query grid — not to the items themselves. It has no effect on a block whose contents are stacked normally.
gap— between items in both directions,-{x}
e.g.gap-mdgap-row— between rows only,-{x}
i.e. the vertical space when items wrap onto a second linegap-col— between columns only,-{x}
i.e. the horizontal space
The theme sets the spacing below a block automatically, based on what kind of content it ends with. Inside a Group laid out as a horizontal row it can’t always tell which block is the last one, so the space underneath sometimes comes out wrong.
Adding last to the final block in that row tells the theme to treat it as the closing element and apply its usual bottom spacing to the row. Only reach for this if the gap under a row looks wrong; otherwise leave it off.
Shadows & effects
box-shadow-small— A soft, subtle shadow, enough to separate a card from the background.box-shadow-large— A deeper, layered shadow for something that should feel lifted off the page.focus-effect— Applies the same glow the site uses to show keyboard focus. Use it sparingly to highlight something static, and never on a link, button or form field, where it would look permanently focused.
Editorial helper
FLAG— Turns the text bright magenta as a reminder that the copy still needs review. Note the capitals, and note that it is visible to visitors as well as editors, so remove it before the page is finished.
Navigation menu classes
The site runs one menu for both the desktop bar and the mobile overlay, so a few classes exist to hide an item in one place without needing a second menu. Add them to the individual menu item’s CSS class field.
overlay-only— The item appears in the overlay menu only, never in the desktop bar.view-all— The item appears on desktop only. Used for “View All…” links, which are redundant in the overlay because it already lists everything.submenu-title— Marks a mega-menu heading that isn’t a real destination, and hides it in the overlay.
Shortcodes
How to use a shortcade
Shortcodes are typed straight into a Paragraph or Shortcode block, square brackets included — for example [current-year]. They are replaced with their content when the page loads, so the editor shows the shortcode itself rather than the result.
[current-year]— Prints the current year, so it never needs updating by hand.[copyright]— Prints a full copyright line with the current year, as used in the footer.[share-links post-type="attorneys"]— The row of share icons (e.g., Facebook, X, copy link, and “print” action”).- On an attorney page the print icon opens that attorney’s PDF biography when one has been uploaded; everywhere else it prints the page.
- Leave off the
post-typesetting, or usepost-type="practice-areas", outside of attorney pages.
[practice-area-categories]— Lists the practice area categories assigned to the current page as text links, each pointing to that category’s page. Only outputs something when the page has categories assigned.
Custom
A reference for the custom utility classes and shortcodes built into this site. Utility classes are small, single-purpose helpers you can add to any block when the editor’s own settings don’t cover what you need.
How to use a class
Select the block, open the Settings sidebar, and expand Advanced. Type the class name into Additional CSS class(es) — without the leading dot. Separate multiple classes with a single space, for example mb-0 hide-on-mobile.
A few of these are only meant for the navigation menu or for specific patterns; those are called out where they appear below.
Text & typography
is-style-narrow— Caps the width at 760px so lines stay comfortable to read. On a Group block it narrows the contents rather than the group itself, and follows the group’s left, center or right justification.fs-small— Sets the text, and any links inside it, to the small body size.fs-hero— Sets the text, and any links inside it, to the largest display size used by hero headlines.balanced— Evens out the line lengths so a heading doesn’t end in one stranded word. Best on short headings.pretty— Prevents orphans and awkward gaps in longer text. Best on body copy.bold— Forces bold weight on the whole block.has-separator— Draws a short vertical rule after the block, for separating items sitting side by side in a row.meta— Formats a row of small print (post date, categories, and similar) as uppercase, slightly bolder, wrapping onto a second line when it runs out of room.meta-term— Picks a single term out of a meta row in the accent color and a heavy weight.
Layout & visibility
mobile-only— Shows the block on mobile and hides it on tablet and desktop (782px and up).hide-on-mobile— The opposite: hides the block on mobile (781px and down) and shows it everywhere else.sticky— Pins the block in place while the rest of the page scrolls past it, leaving room at the top for the fixed header. Only applies on tablet and desktop; on mobile the block scrolls normally.flex-grow— Lets the block stretch to take up the leftover space in a horizontal row.justify-space-between— Pushes the items in a row out to the far edges with the space shared evenly between them. Add this to the row itself, not the items.frame— Adds a thin, light border around the block.has-diagonal-pattern— Reserved for a Cover block using the diagonal background graphic. It removes the section’s side padding and enlarges and repositions the graphic so the diagonal sweeps behind the content, adjusting at each screen size. Not a general-purpose class.
Lists
These apply to the List block only, and each collapses back to a single column on small screens (600px and under).
columns-2— Splits the list into two columns.columns-3— Splits the list into three columns.columns-4— Splits the list into four columns.
Spacing
Spacing classes are built from three parts: what to space (m for margin, the space outside a block; p for padding, the space inside it; gap for the space between items in a row or grid), which side, and how much. So mt-md is a medium margin on top, and px-lg is a large padding on the left and right.
These classes always win over the block’s own spacing settings, which makes them a reliable way to fix a stubborn gap — but it also means the sidebar’s spacing controls will stop having any effect on that side. The sizes below are shared by every class in this section:
0— nonexs— 4pxsm— 8pxreg— 16pxmd— 24pxml— 32pxlg— 80pxxl— 120px
Margin is the space outside the block. Add any size from the list above to one of these prefixes.
m-— all four sides, e.g.m-mdmx-— left and right, e.g.mx-regmy-— top and bottom, e.g.my-lgmt-— top onlymr-— right onlymb-— bottom only, e.g.mb-0to close up the gap under a blockml-— left only
Margins have one extra size the others don’t: auto, which lets the browser share out whatever space is left. mx-auto centers a block that is narrower than its container, m-auto centers it in both directions, and my-auto centers it vertically.
Padding is the space inside the block, between its edge and its content. Most useful on Group and Cover blocks that have a background color.
p-— all four sides, e.g.p-mdpx-— left and right, e.g.px-0to let content run to the edgepy-— top and bottom, e.g.py-lgpt-— top onlypr-— right onlypb-— bottom onlypl-— left only
There is no auto option for padding.
Gap is the space between items inside a block. Add it to the container — a Group set to a row, a Buttons block, a Columns block, or a query grid — not to the items themselves. It has no effect on a block whose contents are stacked normally.
gap-— between items in both directions, e.g.gap-mdgap-row-— between rows only, i.e. the vertical space when items wrap onto a second linegap-col-— between columns only, i.e. the horizontal space
The theme sets the spacing below a block automatically, based on what kind of content it ends with. Inside a Group laid out as a horizontal row it can’t always tell which block is the last one, so the space underneath sometimes comes out wrong.
Adding last to the final block in that row tells the theme to treat it as the closing element and apply its usual bottom spacing to the row. Only reach for this if the gap under a row looks wrong; otherwise leave it off.
Shadows & effects
box-shadow-small— A soft, subtle shadow, enough to separate a card from the background.box-shadow-large— A deeper, layered shadow for something that should feel lifted off the page.focus-effect— Applies the same glow the site uses to show keyboard focus. Use it sparingly to highlight something static, and never on a link, button or form field, where it would look permanently focused.
Editorial helper
FLAG— Turns the text bright magenta as a reminder that the copy still needs review. Note the capitals, and note that it is visible to visitors as well as editors, so remove it before the page is finished.
Navigation menu classes
The site runs one menu for both the desktop bar and the mobile overlay, so a few classes exist to hide an item in one place without needing a second menu. Add them to the individual menu item’s CSS class field.
overlay-only— The item appears in the overlay menu only, never in the desktop bar.view-all— The item appears on desktop only. Used for “View All…” links, which are redundant in the overlay because it already lists everything.submenu-title— Marks a mega-menu heading that isn’t a real destination, and hides it in the overlay.
Shortcodes
Shortcodes are typed straight into a Paragraph or Shortcode block, square brackets included — for example [current-year]. They are replaced with their content when the page loads, so the editor shows the shortcode itself rather than the result.
[current-year]— Prints the current year, so it never needs updating by hand.[copyright]— Prints a full copyright line with the current year, as used in the footer.[share-links post-type="attorneys"]— The row of share icons: Facebook, X, copy link, and a print action. On an attorney page the print icon opens that attorney’s PDF biography when one has been uploaded; everywhere else it prints the page. Leave off thepost-typesetting, or usepost-type="practice-areas", outside of attorney pages.[practice-area-categories]— Lists the practice area categories assigned to the current page as text links, each pointing to that category’s page. Only outputs something on a page that has categories assigned.