7 #Sections Sections

7.1 #Sections.Bleed Bleed section exteneded

section-bleed

Bleeds outside the container and provides a faint background.

Example
Markup:
Markup:

7.2 #Sections.Collapsible Collapsible

collapsible-section

This module requires the use of JavaScript to toggle the visibility of the collapsed content and expanded content.

Example

Collapsible Section

This is the collapsed preview content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien et leo faucibus, eget commodo libero pharetra. Duis metus est, porttitor ut mauris vitae, posuere pretium ligula. Integer ac ante sed leo venenatis fermentum. Aliquam porttitor adipiscing aliquet. Phasellus urna risus, pellentesque eget urna at, auctor faucibus arcu.

<section class="collapsible-section">
  <h3 class="collapsible-section-header">Collapsible Section</h3>
  <div class="collapsible-section-collapsed-content">
    <p>This is the collapsed preview content</p>
  </div>
  <div class="collapsible-section-expanded-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien et leo faucibus, eget commodo libero pharetra. Duis metus est, porttitor ut mauris vitae, posuere pretium ligula. Integer ac ante sed leo venenatis fermentum. Aliquam porttitor adipiscing aliquet. Phasellus urna risus, pellentesque eget urna at, auctor faucibus arcu.</p>
  </div>
</section>

7.3 #Sections.Stacked Stacked

stacked-section

Often used in conjuction with True Grid columns.

Example

Stacked Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien et leo faucibus, eget commodo libero pharetra. Duis metus est, porttitor ut mauris vitae, posuere pretium ligula.

Stacked Section Two

Lorem ipsum dolor sit amet.

Stacked Section Three

Lorem ipsum dolor sit amet.

Stacked Section Four

Lorem ipsum dolor sit amet.

<div class="row">
  <div class="true-grid-5">
    <section class="stacked-section">
      <h2>Stacked Section One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien et leo faucibus, eget commodo libero pharetra. Duis metus est, porttitor ut mauris vitae, posuere pretium ligula.</p>
    </section>
    <section class="stacked-section">
      <h2>Stacked Section Two</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
  </div>
  <div class="true-grid-5 true-grid-offset-1">
    <section class="stacked-section">
      <h2>Stacked Section Three</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
    <section class="stacked-section stacked-section--highlight">
      <h2>Stacked Section Four</h2>
      <p>Lorem ipsum dolor sit amet.</p>
      <ul class="resources-list">
        <li><a href="#">Product Specs</a></li>
        <li><a href="#">Hours</a></li>
        <li><a href="#">Holidays</a></li>
        <li><a href="#">Expiry Calendar</a></li>
        <li><a href="#">Fees</a></li>
      </ul>
    </section>
  </div>
</div>

7.4 #Sections.Landing Landing Page Sections

landing-section, landing-highlight

Use landing-section to correctly pad contents in a wider container. Use landing-highlight intead of landing-section to make one portion of the page stand out.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien et leo faucibus, eget commodo libero pharetra. Duis metus est, porttitor ut mauris vitae, posuere pretium ligula. Integer ac ante sed leo venenatis fermentum. Aliquam porttitor adipiscing aliquet. Phasellus urna risus, pellentesque eget urna at, auctor faucibus arcu.

<div class="landing-section">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien et leo faucibus, eget commodo libero pharetra. Duis metus est, porttitor ut mauris vitae, posuere pretium ligula. Integer ac ante sed leo venenatis fermentum. Aliquam porttitor adipiscing aliquet. Phasellus urna risus, pellentesque eget urna at, auctor faucibus arcu.</p>
</div>
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien et leo faucibus, eget commodo libero pharetra. Duis metus est, porttitor ut mauris vitae, posuere pretium ligula. Integer ac ante sed leo venenatis fermentum. Aliquam porttitor adipiscing aliquet. Phasellus urna risus, pellentesque eget urna at, auctor faucibus arcu.

Important emphasized section.

Show Markup
<div class="landing-section">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien et leo faucibus, eget commodo libero pharetra. Duis metus est, porttitor ut mauris vitae, posuere pretium ligula. Integer ac ante sed leo venenatis fermentum. Aliquam porttitor adipiscing aliquet. Phasellus urna risus, pellentesque eget urna at, auctor faucibus arcu.</p>
</div>
<div class="landing-highlight">
  <p>Important emphasized section.</p>
</div>

7.5 #Sections.Backgrounds Backgrounds extended

Add a background color or gradient to a Landing Section container. For the darker backgrounds, you may need to mixin the inverse class to ensure buttons or other modules appear with light text.

Examples
Default styling

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-highlight
Light gray background

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-highlight-fade
Gradient to white

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-highlight-fade-top
Gradient to light gray

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-vivid
Blue background

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-vivid-fade
Blue with white fade at the bottom

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-vivid-fade-top
Blue with white fade at the top

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-inverse
Dark blue background

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-inverse-fade
Dark blue with fade at the bottom

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-inverse-fade-top
Dark blue with fade at the top

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-dark
Dark gray background

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-dark-fade
Dark gray with fade at the bottom

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

bg-dark-fade-top
Dark gray with fade at the top

Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.

<div class="landing-section [modifier class]">
  <p>Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.</p>
</div>