Marketplace
Important! This documentation is old, and a lot has changed in HubSpot since we released Act version 1. If you are still using Act version 1 we recommend saving these pages for later reference. This documentation will be deleted soon.

Content sections

VIDEO 1: How to add Content Sections
VIDEO 2: How to add a custom background color or image to a Content Section

You can add the content-section class to your main groups to clearly separate content in horizontal full-width sections (rows).

By default, your Content Sections are white, but you can add additional classes to change their look. You can add the alternative class for a light-gray background, or you can add the dark class to show white text on a dark background.

The alternative Content Section has a slight border on top and bottom. You can remove these borders by adding the following classes: no-border-top or no-border-bottom. You can use both classes if no borders are needed, like this:

content-section alternative no-border-top no-border-bottom

Here are all the classes you can use along with content-section:

alternative Adds a light-gray background, and a discreet top and bottom border.
dark Shows white text on a dark background.
smaller-spacing Reduces the section's top and bottom spacing (padding).
no-spacing Removes the section's vertical padding.
smaller-copy Decreases the font size.
no-border-top Removes the top border on the alternative section.
no-border-bottom Removes the bottom border on the alternative section.
top-shadow Adds a thin shadow at the top of the content section.
bottom-shadow Adds a thin shadow at the bottom of the content section.
next-section Adds an arrow button above the content row, that will smoothly scroll to the section. The arrow is physically included in this row, but it will overlap the previous section. If for some reason you need to position the arrow inside this content section, please also add the keep-position class.
keep-position Used along with the next-section class, this will force the arrow to keep its position in the current content section, and not overlapping the previous one.
next-section-accent Used along with the next-section class, the arrow will be placed in a circle and it will get the theme's accent color. As an example, see the arrow overlapping the hero banner on the homepage here.
fixed-background Used along with the image module (section-background-image) described in the VIDEO 2 above, it will make the background image steady when scrolling the page. Please note that this is not enabled in the page editor or on smaller screens because we need to avoid some issues with this property.