Content & Image Boxes

View SiteImprove Policy for This Pattern

The Content & Image Box (CIB) (formerly known as Content Box #1) is a flexible, multipurpose component that includes:

an area for text/content and
an area for a responsive image

Employee Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed veniam.

Subpoint

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed veniam.

Button

Basic Code and Classes:

<div class="content-image-box">

    <div class="wide-* cib-left cib-img" id="#"></div>

    <div class="wide-* cib-right cib-content">

        (content)
    </div>

</div>

.content-image-box - applied to the containing <div>
.cib-left - applied the child <div> you wish to appear on the left
.cib-right - applied the child <div> you wish to appear on the right
.cib-img - applied the child <div> that will contain the image
.cib-content - applied the child <div> that will contain the content/text
.wide-* - controls the width of each child <div> and is based on the percentage-width helper classes
Because images are applied via CSS with background-image: (and SharePoint strips out those types of CSS declarations from any content area), we attach images to the intended child <div> by applying a CSS ID (name of your choosing). In a Script Editor web part, we then include the following code: #ID-name {background-image: url(*file location*);}
CIB's can be used at any size; simply wrap component within a sized <div>, or any bootstrap column

Style This Component

Notice how variations to the layout above can be made by customizing individual PEGASUS elements like the following:

The color of the background of the text (.bg-cprimary is used in this example)
The size and style of the heading (h2.cb-title-xl is used in this example)
The style, color or size of button (.button-md.bg-cprimary-lt is used in this example)

Responsive/Accessibility Warning

Under 575px (on mobile) the .cib-img will disappear, so make sure not to include any vital content or information within the image and that it is only present for decorative purposes.

Examples:

Because the Content & Image Boxes are so flexible, we have outlined a few different options/examples of how they could be implemented for different needs/uses:

"Simple Content Rows"

This example of Content & Image Box can be used to emphasize and embellish various chunks of content.

Employee Success

Student Success

<div class="content-image-box bg-cgrey">
    <div class="wide-3 cib-left cib-img" id="#"></div>
    <div class="wide-9 cib-right cib-content">
      <h2 class="cb-title">Employee Success</h2>
      <p>Lorem ipsum....</p>
    </div>
  </div>
  <div class="content-image-box bg-cgrey">
    <div class="wide-3 cib-left cib-img" id="#"></div>
    <div class="wide-9 cib-right cib-content">
      <h2 class="cb-title">Student Success</h2>
      <p>Lorem ipsum...</p>
    </div>
  </div>

"Navigation Rows"

This example can be used on landing pages to break up navigation items around common themes or topics:

What Will it Cost?

At Dallas College, you get a university-quality education for a quarter of the cost. Get all the details here.

Main Link Secondary Link Secondary Link

  <div class="content-image-box bg-cgrey">
    <div class="wide-3 cib-left cib-img" id="#"></div>
    <div class="wide-9 cib-right cib-content">
      <h2 class="cb-title-lg">What Will it Cost?</h2>
      <p>At Dallas College, you get a university-quality education for a quarter of the cost. Get all the details here.</p>
      <div class="spacer-1"></div>
      <div class="button-nav extra-margin">
        <a href="#" class="button button-md bg-cprimary">Main Link<span class="ico fas fa-arrow-circle-right"></span></a>
        <a href="#" class="button button-md bg-cprimary-dk">Secondary Link</a>
        <a href="#" class="button button-md bg-cprimary-dk">Secondary Link</a>
      </div>
      <ul class="list-inline">
        <li><a href="#">Tertiary Link</a></li>
        <li><a href="#">Tertiary Link</a></li>
        <li><a href="#">Tertiary Link</a></li>
      </ul>
    </div>
  </div>

"Side-by-Side Cards"

This example can be used on landing pages to break up navigation items around common themes or topics:

Active Duty Armed Services

Active duty or not — college is within your reach. We understand the challenge of trying to make the time needed to succeed in college, and our advisors are here to guide you every step of the way.

Active Programs

Beneficiaries of Military Educational Programs

We want you to receive the full value of your educational benefits. Convert your military experience into college credit, finish a degree or retrain for a new civilian career at Dallas College.

Veteran Programs

<div class="row">
  <div class="col-sm-6">
    <div class="content-image-box bg-cgrey">
      <div class="wide-6 cib-left cib-img" id="#"></div>
      <div class="wide-6 cib-right cib-content">
        <div class="height-sm-500">
          <h2 class="cb-title">Active Duty Armed Services</h2>
          <p>Active duty or not — college is within your reach...</p>
        </div>
        <a class="button bg-cprimary button-full-block" href="#"><span class="ico fas fa-arrow-circle-right" aria-hidden="true"></span>Active Military Programs</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="content-image-box bg-cgrey">
      <div class="wide-6 cib-left cib-img" id="#"></div>
      <div class="wide-6 cib-right cib-content">
        <div class="height-sm-500">
          <h2 class="cb-title">Veterans & Other Beneficiaries of Military Educational Programs</h2>
          <p>We want you to receive the full value of your educational benefits...</p>
        </div>
        <a class="button bg-cprimary button-full-block" href="#"><span class="ico fas fa-arrow-circle-right" aria-hidden="true"></span>Veteran Programs</a>
      </div>
    </div>
  </div>
</div>

Employee Success

Subpoint

Basic Code and Classes:

Style This Component

Responsive/Accessibility Warning

Examples:

"Simple Content Rows"

Employee Success

Student Success

"Navigation Rows"

What Will it Cost?

"Side-by-Side Cards"

Active Duty Armed Services

Beneficiaries of Military Educational Programs

Patterns