Layout

Table of contents:

• Introduction
• Structure
• Examples
• Five or seven equal columns
• Stacking or adjusting columns on smaller screens
• Columns with equal heights
• Layout utility classes

Introduction

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, we've developed a clean layout system that you can use with your own custom HTML, such as in a custom module you are developing, within the source code of a rich text field, an advanced custom mega menu, a partial, or anywhere you can add HTML. We've actually used this layout system in many Act3 resources, such as headers, card modules, blogs, and more. Whenever you specify different numbers of columns for different screen sizes, it's helpful to know that this layout system is what makes it all possible.

Structure

Our layout system uses simple classes that are easy to remember. For example, here's the code for a full section:

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

The section is optional but recommended for full page sections. It includes the Vertical space from your theme settings as its top/bottom padding. The rows (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.

Columns (col) 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.

As you can see in the code above, we've used a 12-column grid (similar to Bootstrap) to specify the 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, you would divide the 12 units into two equal parts, so 12 / 2 = 6. This means the class for a column that spans half the width of the row is s6.

Examples

Here's the code for a two-column layout:

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

A three-column layout:

<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>

A four-column layout:

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

A four-column layout, with the first and third columns being smaller:

<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 classic 12-column grid, adding five or seven equal columns is basically impossible. But you can do that in Act3. Simply add the eq5 class instead of a span class, and the columns will become equal:

<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

By design, columns won't stack or change span on smaller screens by default. To do that, you can add the same span classes we showed above, but this time with a md- or sm- prefix. Here is an example of a three-column layout with stacked columns on mobile using the sm-s12 class, which will make them full-width on small screens:

<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>

You can resize this browser window to see the columns stack as it gets smaller.

Here is another example with four columns that will convert into a 2-column layout on medium screens, and completely stack on mobile:

<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:

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

To ensure they have the same height, we can add the items-stretch class to the row:

<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. More text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text.</div>
  </div>
</div>

What if we want to add a box inside each column and make the boxes have equal height? Here's the code for that:

<div class="row items-stretch">
  <div class="col s6 sm-s12 flex-row">
    <div class="box" style="margin-bottom: 24px; padding: 24px; background: #E2E6EB; border-radius: 12px;">
      Box
    </div>
  </div>
  <div class="col s6 sm-s12 flex-row">
    <div class="box" style="margin-bottom: 24px; padding: 24px; background: #E2E6EB; border-radius: 12px;">
      More text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text.
    </div>
  </div>
</div>

Layout utility classes

You can use these pre-defined utility classes to create custom layouts without writing extra CSS, or whenever you need to quickly lay out elements using only HTML. This allows you to reuse code efficiently, and most of these classes can also be used with the md- and sm- prefixes, which help adjust your layout for smaller screens. We've used them extensively in Act3 to make our code more efficient.

Flexbox

Here are all the flexbox utility classes that also accept md- and sm- suffixes:

Visibility

You can use these classes to hide elements on specific screen sizes. By default, the element will remain visible on other breakpoints, unless you also apply the hidden class for those breakpoints. For example, to hide an element on both large and medium screens, you would use: lg-hidden md-hidden. In this case, the element will only be visible 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.

Here are some div block elements placed inline and centered:

<div class="inline-items inline-items--center" style="gap: 10px;">
  <div style="padding: 10px; background: black; color: white;">One</div>
  <div style="padding: 10px; background: black; color: white;">Two</div>
  <div style="padding: 10px; background: black; color: white;">Three</div>
</div>

Other layout classes