Skip to main content
Design System

Sections Layout Snippets

Snippet Structure

The snippets listed in the Section Layout are snippets with the HTML structure to build a new section on a page. These snippets have all the divs and classes needed to create new sections with all the margins, paddings, and other CSS styles that sections must have. The snippets on this list should be used only when the users want to build a second section, third section, etc.

The Section Layout Snippet Anatomy

<main-content>
  <div class="t-section__wrap">
    <section class="t-section">
      <div class="t-section__intro">
        <!-- Start - Section Intro -->
          <h2>Section Header</h2>
        <!-- End - Section Intro -->
      </div>
      <div class="t-section__content">
        <!-- Start - Section Content -->
          <p>section text </p>
        <!-- End - Section Content -->
      </div>
    </section>
  </div>
</main-content>

Looking at the basic code of a Section Layout snippet, we can see the extra divs and classes that create a full-width section. The <main-content> is the code that makes the section render on the frontend, and this is only to be used at the Omni Campus CMS. The <section> tag with the t-section class is the one that contains the margins and paddings needed. And the Divs with the t-section__intro and t-section__content are the Divs where we will insert the content.

The <div class="t-section__intro"> is where the users can insert the content of the introduction of the section. It mainly will hold an <h2> element and sometimes it can also hold a <p> element with a class=”c-intro-text”. The <p> tag in this Section Intro <div class="t-section__intro"> will exist only if this text is an introduction of the content presented in this section.

The Section Content <div class="t-section__content"> will hold <p> will hold the main content of the section. The person who is building this section is the one that will make choices of how to display this content in the best way for the end user. In most of the cases, the <div class="t-section__content"> will hold <p> tags and even some <h3> tags. If the content is more complex, another snippet can be added to this region, and content can be inserted. You can have access to the snippets list here.

Basic | Section Layout

Card Grid | Section Layout

Columns | Section Layout

Feed | Section Layout

Styling a Section Layout Snippet

Styles can be implemented into the section by applying classes in a few divs. If a user wants to add style to the entire section, the class has to be added to the first div of the section, the <div class="t-section__wrap"> . In the example bellow, we can see that a new class was added to the div:

<div class="t-section__wrap u-bg-light-blue">

By adding the u-bg-light-blue class, we added the blue color to the section. You can check here the list with all the classes options to add style to the full section.

Reduced Width Sections

Adding the t-section--cap-line-length class on the <section> will reduces the max width of a section to 1200px (from 1600px), which is an ideal line length for large sections of text content. Care should be taken when adding this class to other section layouts or when using both full-width and reduced width sections on the same page.

The Outro option

Representation of a section with the Outro div option
<main-content>
  <div class="t-section__wrap">
    <section class="t-section">
      <div class="t-section__intro">
        <!-- Section Intro -->
      </div>
      <div class="t-section__content">
        <!-- Section Content -->
      </div>
      <div class="t-section__outro">
        <!-- Start - Section Outro -->
          <p>section outro content </p>
        <!-- End - Section Outro -->
      </div>
    </section>
  </div>
</main-content>