Containers and Sections

When you add content to your web pages, you'll need to use two building blocks to organize and order your content. They each have specific functions and capabilities.

These are:

 

 

Containers

Containers add margins, or space, on the sides of the area where you're working.

  • Container with margins
    • To be used in the full-width area.
    • This container adds margins on the left and right sides of the page.
  • Container with sidebar and margins (part of the Left Nav section preset)
    • To be used in the full-width area.
    • This container adds margins on the left and right of the page and a left navigation sidebar.
    • It is recommended to use the Left Nav section preset when first adding containers to your page.
    • Only top-level and marketing landing pages will use this directly.
A screenshot of the container options in NET Core. Two rectangles with the phrases container with margins and container with sidebar and margins respectively.

Instructions

Standards

Do:

  • Use the containers to add padding to the left and right sides of your content.
  • Use the Container with sidebar and margins through the Left Nav section preset directly under the Breadcrumb widget.

Do NOT:

  • Put containers inside containers.
  • Put content directly into containers. Content needs to be placed into sections or misalignment of your page may occur.
  • Use more than one Container with sidebar and margins on a page.
  • Use sections to hold an image or video background.

 

 

Sections

Sections add margins to the top and bottom of the area where you're working within a container. You can also use sections to divide your workspace into columns that stack on mobile devices.

  • Section
    • To be used in containers.
    • Creates a specific area to house content that has margins on the top and bottom.
    • Sections can be used to divide a content area into columns.
      • Max number of columns in the full-width area 3-4.
      • Max number of columns in the partial width area (next to the side bar) is 2.
  • Section preset
    • Can be used in the full-width or partial width areas.
    • Allows developers to create pre-configured combinations of containers, sections and widgets that you can add to your page. This is the preferred method of adding listing widgets as well as the left navigation to a page.
    • Once a section preset is created, it can be added to multiple pages.
      • It can be edited on the page and the changes made will not affect other pages its on.
      • For example, the news and events list presets can be further configured to show content from one specific college or department.
A screenshot of the section options in NET Core. Two rectangles with the text section and section preset.

Instructions

Standards

Do:

  • Use sections to create columns for content.

Do NOT:

  • Overly use sections on a web page.
Table of Contents