Layout

Notes

To learn how to use HubSpot's built-in page editor and create your layout (add, reorder, or remove sections, columns, or modules using drag-and-drop tools), please refer to this HubSpot knowledge page.
This article is intended for developers or users with a basic understanding of HTML who aren't afraid of using a bit of code occasionally. You don't need to understand this layout system or use code to create beautiful sections, add modules, and do your website work. This is an extra feature for users who want to create modules, partials, or other building blocks with code.

Overview

Act3 is built with a simple yet powerful layout system. In addition to the layouts you can create using HubSpot's built-in page editor, Act3 includes a clean layout system for custom HTML — such as in a custom module, within the source code of a rich text field, an advanced custom mega menu, a partial, or anywhere HTML is available.

This layout system is used across many Act3 resources, including headers, card modules, blogs, and more. Whenever you specify different numbers of columns for different screen sizes, this is the system that makes it possible.

Structure

A typical full-width section can be built with section, container, row, and col classes:

<section class="section">
  <div class="container">
    <div class="row">
      <div class="col s12">
        Content
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="row">
      <div class="col s12">
        Content
      </div>
    </div>
  </div>
</section>

The section wrapper is optional but recommended for full page blocks. It includes your Vertical space values as top/bottom spacing.

The row can be placed in a container. It's recommended to have a single container per section/layout block. The container is also used to align the content in the center of the page. Its width is dictated by the Content width value from your theme settings.

The colelements must be direct children of rows. For multiple rows, you don't necessarily need to add new row elements. You can simply use the span (s) classes described below, giving you more flexibility to adjust rows and columns without adding extra row wrappers or moving columns to new rows.

The layout uses a 12-column grid to specify column sizes. The s12 class added to col indicates that this column spans all 12 grid units, making it a full-width column. If you need a two-column layout with equal widths, divide the 12 units into two equal parts: 12 / 2 = 6. This means the class for a column that spans half the width of the row is s6.

Examples

Here are common combinations to help visualize how the 12-column grid behaves.

Two equal columns

Column 1

Column 2

<div class="container">
  <div class="row">
    <div class="col s6">Column 1</div>
    <div class="col s6">Column 2</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col s6">Column 1</div>
    <div class="col s6">Column 2</div>
  </div>
</div>

Three equal columns

Column 1

Column 2

Column 3

<div class="container">
  <div class="row">
    <div class="col s4">Column 1</div>
    <div class="col s4">Column 2</div>
    <div class="col s4">Column 3</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col s4">Column 1</div>
    <div class="col s4">Column 2</div>
    <div class="col s4">Column 3</div>
  </div>
</div>

Mixed column spans

<div class="container">
  <div class="row">
    <div class="col s2">Column 1</div>
    <div class="col s4">Column 2</div>
    <div class="col s2">Column 3</div>
    <div class="col s4">Column 4</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col s2">Column 1</div>
    <div class="col s4">Column 2</div>
    <div class="col s2">Column 3</div>
    <div class="col s4">Column 4</div>
  </div>
</div>

Five or seven equal columns

In a standard 12-column grid, fitting five or seven equal columns is not possible, since 12 cannot be divided by 5 or 7 evenly. Act3 makes it possible by using eq5 or eq7 on each column instead of span classes.

<div class="container">
  <div class="row">
    <div class="col eq5">Column 1</div>
    <div class="col eq5">Column 2</div>
    <div class="col eq5">Column 3</div>
    <div class="col eq5">Column 4</div>
    <div class="col eq5">Column 5</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col eq5">Column 1</div>
    <div class="col eq5">Column 2</div>
    <div class="col eq5">Column 3</div>
    <div class="col eq5">Column 4</div>
    <div class="col eq5">Column 5</div>
  </div>
</div>

The same goes for a seven-column layout using the eq7 class, although it may be too much and could potentially squeeze the content on a medium or smaller screen.

Stacking or adjusting columns on smaller screens

Columns do not stack or change span on smaller screens by default. To change that, add the same span classes described above with a md- or sm- prefix. For example, adding sm-s12to each column makes them full-width on small screens.

An example of three columns that stack on small screens — resize browser window to test:

Column 1

Column 2

Column 3

<div class="container">
  <div class="row">
    <div class="col s4 sm-s12">Column 1</div>
    <div class="col s4 sm-s12">Column 2</div>
    <div class="col s4 sm-s12">Column 3</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col s4 sm-s12">Column 1</div>
    <div class="col s4 sm-s12">Column 2</div>
    <div class="col s4 sm-s12">Column 3</div>
  </div>
</div>

Four columns that become 2 columns on medium screens and stack on small screens:

Column 1

Column 2

Column 3

Column 4

<div class="container">
  <div class="row">
    <div class="col s3 md-s6 sm-s12">Column 1</div>
    <div class="col s3 md-s6 sm-s12">Column 2</div>
    <div class="col s3 md-s6 sm-s12">Column 3</div>
    <div class="col s3 md-s6 sm-s12">Column 4</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col s3 md-s6 sm-s12">Column 1</div>
    <div class="col s3 md-s6 sm-s12">Column 2</div>
    <div class="col s3 md-s6 sm-s12">Column 3</div>
    <div class="col s3 md-s6 sm-s12">Column 4</div>
  </div>
</div>

Columns with equal heights

The columns don't have equal height by default.

Column 1

Column 2 with more text more text more text more text more text.

<div class="container">
  <div class="row">
    <div class="col s6 sm-s12">Column 1</div>
    <div class="col s6 sm-s12">Column 2 with more text...</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col s6 sm-s12">Column 1</div>
    <div class="col s6 sm-s12">Column 2 with more text...</div>
  </div>
</div>

To force equal-height columns, add items-stretch to the row:

Column 1

Column 2 with more text more text more text more text more text.

<div class="container">
  <div class="row items-stretch">
    <div class="col s6 sm-s12">Column 1</div>
    <div class="col s6 sm-s12">Column 2 with more text...</div>
  </div>
</div>

<div class="container">
  <div class="row items-stretch">
    <div class="col s6 sm-s12">Column 1</div>
    <div class="col s6 sm-s12">Column 2 with more text...</div>
  </div>
</div>

If you are placing boxed content inside columns, combine items-stretch on the row and flex-row on the column wrappers.

Box 1

Box 2 with more text more text more text more text more text more text.

<div class="row items-stretch">
  <div class="col s6 sm-s12 flex-row">
    <div class="box">
      Box
    </div>
  </div>
  <div class="col s6 sm-s12 flex-row">
    <div class="box">
      More text more text more text...
    </div>
  </div>
</div>

<div class="row items-stretch">
  <div class="col s6 sm-s12 flex-row">
    <div class="box">
      Box
    </div>
  </div>
  <div class="col s6 sm-s12 flex-row">
    <div class="box">
      More text more text more text...
    </div>
  </div>
</div>

Layout utility classes

The following utility classes can help you build custom layouts quickly. Many also support responsive prefixes such as md- and sm-.

Flexbox

Class	Description/CSS properties
`flex`	`display: flex`
`inline-flex`	`display: inline-flex`
`no-shrink`	Apply to parent. All child elements will have: `flex-shrink: 0`.
`self-no-shrink`	`flex-shrink: 0`
`self-shrink`	`flex-shrink: 1`
`flex-row`	`flex-direction: row`
`flex-row-reverse`	`flex-direction: row-reverse`
`flex-col`	`flex-direction: column`
`flex-col-reverse`	`flex-direction: column-reverse`
`wrap`	`flex-wrap: wrap`
`wrap-reverse`	`flex-wrap: wrap-reverse`
`justify-start`	`justify-content: flex-start`
`justify-end`	`justify-content: flex-end`
`justify-center`	`justify-content: center`
`justify-between`	`justify-content: space-between`
`justify-around`	`justify-content: space-around`
`justify-evenly`	`justify-content: space-evenly`
`items-start`	`align-items: flex-start`
`items-end`	`align-items: flex-end`
`items-center`	`align-items: center`
`items-stretch`	`align-items: stretch`
`items-baseline`	`align-items: baseline`
`content-start`	`align-content: flex-start`
`content-end`	`align-content: flex-end`
`content-center`	`align-content: center`
`content-stretch`	`align-content: stretch`
`content-between`	`align-content: space-between`
`content-around`	`align-content: space-around`
`md-`, `sm-`	Most flex utility classes also support medium/small responsive prefixes (for example `md-flex`, `sm-items-center`).

Visibility

These classes hide elements by breakpoint. The element remains visible on other breakpoints unless you also hide it there. For example, lg-hidden md-hidden keeps it visible only on small screens.

Class	Description/CSS properties
`lg-hidden`	Hides the element on large screens.
`md-hidden`	Hides the element on medium screens.
`sm-hidden`	Hides the element on small screens.

Inline elements

This component is great for placing elements inline, such as buttons, icons, etc. Your wrapper needs to include the inline-items class, along with any modifier classes for alignment, including those for medium and small screens. For example, a wrapper with elements displayed inline and centered on large screens, but aligned to the left on small screens, would contain these classes: inline-items inline-items--center inline-items--sm-left.

Class	Description/CSS properties
`inline-items`	Places all children elements inline. This is the block-level class and is required.
`inline-items--left`	Modifier class. Aligns the elements to the left.
`inline-items--center`	Modifier class. Aligns the elements to the center.
`inline-items--right`	Modifier class. Aligns the elements to the right.
`inline-items--md-left`	Modifier class. Aligns the elements to the left on medium screens.
`inline-items--md-center`	Modifier class. Aligns the elements to the center on medium screens.
`inline-items--md-right`	Modifier class. Aligns the elements to the right on medium screens.
`inline-items--sm-left`	Modifier class. Aligns the elements to the left on small screens.
`inline-items--sm-center`	Modifier class. Aligns the elements to the center on small screens.
`inline-items--sm-right`	Modifier class. Aligns the elements to the right on small screens.

Here are some div block elements placed inline and centered:

One

Two

Three

<div class="inline-items inline-items--center" style="gap: 10px;">
  <div class="element">One</div>
  <div class="element">Two</div>
  <div class="element">Three</div>
</div>

<div class="inline-items inline-items--center" style="gap: 10px;">
  <div class="element">One</div>
  <div class="element">Two</div>
  <div class="element">Three</div>
</div>

Other layout classes

Class	Description/CSS properties
`clear`	The classic method for clearing a wrapper that contains floated elements.
`minh-full`	The element will always be at least as tall as the viewport.
`minh-half`	The element will always be at least as tall as half the viewport.
`box`	`width: 100%`. Useful for direct child elements of flex rows to fill the entire width of the row.