Split Sections

# Overview

• Split Sections consists of the Section Content and the Section Image.
• The Section Image is aligned to the left by default. This can be changed by using the class .img-rght, which shifts the Section Image to the right and the Section Content to the left.
• Split Sections are best used in a full-width container.

  <div class="split-section">
    <div class="split-section-img" style="background-image:url'(/path/to/file.jpg')"></div>
    <div class="split-section-content">
      <div class="split-section-title faux-heading h2">Media Studies</div>
      <p>Media Studies minor courses examine the relationship of media to ethnicity, gender, race and social identity.</p>
      <a href="/path/to/page" class="btn sm">Button Text</a>
    </div>
  </div>

  <div class="split-section img-right">
    ...
  </div>
          

# Split Section Colors

In addition to the default transparent Section Content background, you can also choose between 3 other alternate colors to fit your UI needs; .primary, .black and .gray.

Note: When using split-section color classes the content text color will automatically adjust to contrast with the background color. You will need to add the .split-section-title to your title to allow the title to automatically change as well but you are free to use any color classes for the card button.

  <div class="split-section primary">
    ...
  </div>

  <div class="split-section img-right black">
    ...
  </div>

  <div class="split-section gray">
    ...
  </div>