IceGroupWeb CSS Guide

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