Helper Classes
Helper classes are available on certain blocks for minor tweaks. They can help with margins, padding, float fixes and more.
The most common classes can be selected in the block sidebar under the Advanced panel. Others can be manually added in the Additional Additional CSS class(es) textbox.
Container / Sidebar Width
Use wider or narrower container widths for the content on groups with full alignment. There is also a selection available for the sidebar that only contains wide and narrow options to select a wider or more narrow sidebar.
| Selection | Class | Block(s) | Description |
|---|---|---|---|
| Wide | wide | Group | Wide content container width |
| Narrow | narrow | Group | Narrow content container width |
| Narrower | narrower | Group | Narrower content container width |
Aspect Ratio
The embed blocks do not always pick up the correct aspect ratio for a video. The aspect ratio can be overwritten with this dropdown.
| Selection | Class | Block(s) | Description |
|---|---|---|---|
| 16:9 ratio | aspect-16-9 | Embed, Video | Forces 16:9 ratio on Embed if responsive is not working properly |
| 4:3 ratio | aspect-4-3 | Embed, Video | Forces 4:3 ratio on Embed if responsive is not working properly |
| Square (1:1) | aspect-1-1 | Embed, Video | Forces 1:1 ratio for videos originally shared on Instagram |
| Spectrogram (5:2) | spectrogram | Embed, Video | Forces narrow ratio on Embed for spectrogram videos |
Modify Margin and Padding
Add or remove spacing outside (margins) or inside (padding) of blocks. Classes can be added to the group and column block as well as individual columns.
Margin Options
| Selection | Class | Block(s) | Description |
|---|---|---|---|
| Add Top Margin | add-margin-top | Group, Columns, Column | Adds margin before block (2rem/32px) |
| More Top Margin | more-top-margin | Group, Columns, Column | Adds more margin before block (4rem/64px) |
| Remove Top Margin | remove-margin-top | Group, Columns, Column | Removes margin before block |
| Negative Top Margin | negative-margin-top | Group, CTA | Adds negative margin to the top of the block to remove the gap between a CTA and hero – ONLY use on first block |
| Add Bottom Margin | add-margin-bottom | Group, Columns, Column | Adds margin after block (2rem/32px) |
| More Bottom Margin | more-margin-bottom | Group, Columns, Column | Adds more margin after block (4rem/64px) |
| Remove Bottom Margin | remove-margin-bottom | Group, Columns, Column | Removes margin after block |
| Negative Bottom Margin | negative-margin-bottom | Group, CTA | Adds negative margin to the bottom of the block to remove the gap between a CTA and footer – ONLY use on last block |
Padding Options
| Selection | Class | Block(s) | Description |
|---|---|---|---|
| Add Top Padding | add-padding-top | Group, Columns, Column | Adds padding before block |
| Remove Top Padding | remove-padding-top | Group, Columns, Column | Removes padding before block |
| Add Bottom Padding | add-padding-bottom | Group, Columns, Column | Adds padding after block |
| Remove Bottom Padding | remove-padding-bottom | Group, Columns, Column | Removes padding after block |
The following are also available as manual classes:
| Class | Block(s) | Description |
|---|---|---|
| add-margin | Group, Columns, Column | Adds margin before and after block |
| remove-margin | Group, Columns, Column | Removes margin before and after block |
| add-padding | Group, Columns, Column | Adds padding before and after block |
| remove-padding | Group, Columns, Column | Removes padding before and after block |
Clear Float
Add a clear class to blocks that fall below floated blocks so that the floated element does not interfere with the block below.
| Selection | Class | Block(s) | Description |
|---|---|---|---|
| Both | clearboth | Any | Content will “clear” the float of an element that is floated left or right |
| Right | clearright | Any | Content will “clear” the float of an element that is floated right |
| Left | clearleft | Any | Content will “clear” the float of an element that is floated left |
Float-Margin
These classes add margins to the left or right of content so they align better with floated content they are next to. One use case for this are list items that are to the right of a left sidebar – so the bullets align properly.
| Selection | Class | Block(s) | Description |
|---|---|---|---|
| Left Margin | float-marginleft | Any | Left margin for content next to a left sidebar |
| Left Wide Margin | float-wide-marginleft | Any | Left margin for content next to a left wide sidebar |
| Left Narrow Margin | float-narrow-marginleft | Any | Left margin for content next to a left narrow sidebar |
| Right Margin | float-marginright | Any | Right margin for content next to a right sidebar |
| Right Wide Margin | float-wide-marginright | Any | Right margin for content next to a right wide sidebar |
| Right Narrow Margin | float-narrow-marginright | Any | Right margin for content next to a right narrow sidebar |
Manual Classes
The following classes can be manually added to the block in the block sidebar under the Advanced panel in the textbox under Additional CSS class(es).
| Class | Block(s) | Description |
|---|---|---|
| less-gap | Columns | Uses less gap between columns (from 4rem to 1rem) |
| break-small | Columns | Breakpoint to 100% columns happens at page width of 600px rather than 800px |
| unordered-list | Article List | Best used with list style – lists articles as an unordered list |
| no-margin | Video Transcript | Use no negative margin before transcript – by default, the transcript block has a negative top margin that will bring is closer to the video. |
| less-margin | Video Transcript | Use less negative margin between transcript and video |
| border | Embed | Add slight border around video to seperate from background |
| no-border | Images, Videos, Embeds | Removes border from below captions |
This is an example of a global CTA
Supporting Text for the global CTA