Sections

The section class name is available for consistency in applying bottom margins to page sections.

<section class="section">
  <div class="promo-group-header">
    <h3 class="promo-group-header__title">All Showtime Series</h3>
  </div>
</section>

Here are the current variants available for bottom margins:

.section                  // (40px bottom margin at all breakpoints)  
.section--large           // (40px below medium, 80px medium and above)  
.section--extra-large     // (80px below medium, 120px medium and above)  

section--inner

The section--inner class name is considered a variant that could apply to the element with the section class, and this essentially just extends the full-width-container__inner placeholder, as seen below.

<section class="section section--black section--inner">
  <div class="promo-group-header">
    <h3 class="promo-group-header__title">All Showtime Series</h3>
  </div>
</section>

The section--gradient variation include a subtle background gradient from top to bottom. Here is an example where the section background needs to apply across the entire width of the container, but the inner contents of the section should be constrained by the full-width-container__inner placeholder's styles. So here, the section--inner classname is applied to an inner element.

<section class="section section--gradient">
  <div class="section--inner">
    ...
  </div>
</section>