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.
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.
Standards
Do:
- Use sections to create columns for content.
Do NOT:
- Overly use sections on a web page.