Sections & Containers

Sections and Containers are the structures that bind each component and form the foundation of Component System webpages.

A Section can be considered a webpage 'building block', and is the outer-most element to be used as the base for each Component. Sections cannot be placed inside Sections. They are the base (parent) element for each Component.

Containers are typically placed inside a Section, and have different properties to a Section. Unlike Sections – which form the outer-base and cannot be nested – Containers can be nested within other Containers and multiple Containers can be nested inside a Section.

Below are the default styling options that come with Sections and Containers. Change these properties to suit the design.

Section Spacing

Although Sections can support multiple top level class styles (including background colours/images, border dividers etc.) Section spacing is a Section-specific style that affects the padding of the Section to its first child Container element.

Shorter, short, default, tall, taller Section Spacing options are available. The designer can add more Section Spacing options (and label) as needed.

Change the horizontal padding (left, right) on the default section below. Change the vertical padding (top, bottom) on the default section + all height variants.

Implementation tip
Apply padding styles for all device widths. For example: 100px vertical padding might be appropriate padding for desktop, but may be too much on small mobile.

Default

c-section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.



Short

c-section

is--short

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.



Shorter

c-section

is--shorter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.



Tall

c-section

is--tall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.



Taller

c-section

is--tall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Section Headers & Footers

Section Headers and Footers are useful when a section contains multiple varying content containers, but needs set header or footer content above or below it. A Section Header creates spacing below it, and a Section Footer creates spacing above it.

Place the Section Header or Footer inside a Container to take on consistent Container properties.

To update the spacing styling, change the bottom margin on .c-section__header and the top margin on .c-section__footer. You can also change the default text alignment of both (defaults to center).

Implementation tip
Section Headers and Footers are useful when creating introduction heading/content to a complex component, or as a final call-to-action heading/button to close out a component.

Section Header

c-section__header

Implementation tip
If you change the default top margin of the H3 tag in Typography, update the negative top margin of .c-section__header to cancel out the H3's new top margin.

Section Header. Edit here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Placeholder Container. Do not edit. Edit the above .c-section__header

Section Footer

c-section__footer

Placeholder Container. Do not edit. Edit the below .c-section__footer

Container Width

By default, Containers are aligned to a 12-column grid which has a maximum of 1200px wide, has 20px gutters with an outside gutter.

If the designer wishes to use a different grid maximum width or different gutters sizes, change the maximum widths of each of the containers below. If you are using different gutters, also change the padding of the columns on the Grids page.

Note: the modifier classes (.is--x-col-wide) refer to how many columns in the 12-column grid the container spans. This is a different naming convention to the one used for the Grids page.

Implementation tip
It is very important to remember that a Component System Container isn't a Webflow default container (which has its own styling). A .c-container should be applied to a div element.

Default

c-section

c-container

10-col container

c-section

c-container

is--10-col-wide

8-col container

c-section

c-container

is--8-col-wide

6-col container

c-section

c-container

is--6-col-wide

5-col container

c-section

c-container

is--5-col-wide

Container Alignment

The designer can choose to left or right align a Container by overriding the default center style using a global Helper Class (.mr-auto or .ml-auto). This can be used on any sized container.

Left

c-section

c-container

mr-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Right

c-section

c-container

ml-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Container Overlap

A common visual style is to overlap elements over others. This is common for Containers to overlap above or below sections. Overlapping can be used on any size Container and be also be applied to other elements within a project.

Edit the values of .overlap-top and .overlap-bottom inside the dotted section below; don't edit them directly on the .c-container element. The visual changes will flow onto the examples below.

Ensure the overlapping Containers' parent sections have their padding-top or padding-bottom values reset as necessary, using the .pt0 or .pb0 Helper Classes.

Edit Overlap values by selecting text elements below
.overlap-top
.overlap-bottom

Top

c-section

pt0

c-container

overlap-top


Placeholder Container. Do not edit. Edit the above .overlap-top class

Bottom

c-section

pb0

c-container

overlap-bottom

Placeholder Container. Do not edit. Edit the above .overlap-bottom class