SharePoint Information Site > Visual Guides > Body Content Objects

Body Content Objects

These are various prefabricated structures, commonly called objects, modules or cards. These structures are created strictly by combining classes already present in the DePaul University Responsive CSS framework. We've created these to help structure common approaches to content, organize page structures, and bring some zip to your content.

Edit the HTML Markup of a page to make edits to body content objects. See our HTML Guide for more information.

Note that Panel Objects in particular work best in full-width and two-column layouts, and in groups of two three. See below for visual and code examples.

Skinned Panel Objects with image

View Markup



<div class="line">
  <ul class="no-bullets">
    <li class="unit size1of3">
    <div class="media skinsstructure1 skin-simple-gray">
      <div class="media-body panel-obj">
        <h3 class="media-heading">Panel Heading</h3>
          <img src="http://placehold.it/600x400" alt=""/>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
          <p><a href="#" class="cta-type1 cta-blue">Take Action</a></p>
        </div>
      </div>      
    </li>    
    <li class="unit size1of3">      
      <div class="media skinsstructure1 skin-simple-gray">
        <div class="media-body panel-obj">
          <h3 class="media-heading">Panel Heading</h3>
          <img src="http://placehold.it/600x400" alt=""/>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. </p>
          <p><a href="#" class="cta-type1 cta-light-blue">Take Action</a></p>
        </div>
      </div>        
    </li>    
    <li class="unit size1of3">       
      <div class="media skinsstructure1 skin-simple-gray">
        <div class="media-body panel-obj">
        <h3 class="media-heading">Panel Heading</h3>
        <img src="http://placehold.it/600x400" alt=""/>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras sit amet nibh libero, in gravida nulla.</p>
        </div>
      </div>       
    </li>
  </ul>
</div>
  • Panel Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Take Action

  • Panel Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.

    Take Action

  • Panel Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras sit amet nibh libero, in gravida nulla.


Skinned Panel Objects with Social

View Markup


<div class="line">
  <ul class="no-bullets">
    <li class="unit size1of3">
    <div class="media skinsstructure1 skin-simple-gray">
      <div class="media-body panel-obj">
        <h3 class="media-heading">Panel Heading</h3>
          <img src="http://placehold.it/600x400" alt=""/>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
          <p><a href="#" class="cta-type1 cta-gray">Take Action</a></p>
        </div>
      </div>      
    </li>    
    <li class="unit size1of3">      
      <div class="media skinsstructure1 skin-simple-gray">
        <div class="media-body panel-obj">
          <h3 class="media-heading">Panel Heading</h3>
          <img src="http://placehold.it/600x400" alt=""/>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. </p>
          <p><a href="#" class="cta-type1 cta-gray">Take Action</a></p>
        </div>
      </div>        
    </li>    
    <li class="unit size1of3">       
      <div class="media skinsstructure1 skin-simple-gray">
        <div class="media-body panel-obj">
        <h3 class="media-heading">Connect with us...</h3>
       <p>Check us out on Facebook and Twitter.</p>
        <p class="skin-social">
      <a class="twitter social-gray" a href="#"></a>
      <a class="fb social-gray" a href="#"></a>
    </p>
        </div>
      </div>       
    </li>
  </ul>
</div>

  • Panel Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.

    Take Action

  • Panel Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.

    Take Action

  • Connect with us...

    Check us out on Facebook and Twitter.


Skinned Panel Objects without image

View Markup


<div class="line">
  <ul class="no-bullets">
    <li class="unit size1of3">
      <div class="media skinsstructure1 skin-simple-gray">
        <div class="media-body panel-obj">
          <h3 class="media-heading">Panel Heading</h3>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
          <p><a href="#" class="cta-type1 cta-blue">Take Action</a>
          </p>
        </div>
      </div>
    </li>
    <li class="unit size1of3">
      <div class="media skinsstructure1 skin-simple-gray">
        <div class="media-body panel-obj">
          <h3 class="media-heading">Panel Heading</h3>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
          <p><a href="#" class="cta-type1 cta-blue">Take Action</a>
          </p>
        </div>
      </div>
    </li>
    <li class="unit size1of3">
      <div class="media skinsstructure1 skin-simple-gray">
        <div class="media-body panel-obj">
          <h3 class="media-heading">Panel heading</h3>
          <p>Cras sit amet nibh libero, in gravida nulla.</p>
          <ul class="bold">
            <li><a href="#">How to Apply for Housing</a>
            </li>
            <li><a href="#">Lincoln Park Buildings</a>
            </li>
            <li><a href="#">Housing Tours</a>
            </li>
            <li><a href="#">Assignments</a>
            </li>
            <li><a href="#">Cancellation Information</a>
            </li>
            <li><a href="#">Frequently Asked Questions</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

Non-skinned Panel Objects with image

View Markup


<div class="line">
  <ul class="no-bullets">
    <li class="unit size1of3">
      <div class="panel-obj">
        <img src="http://placehold.it/600x400" alt="" />
        <div class="caption">
          <h3>Panel Heading</h3>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh.</p>
          <p><a href="#" class="cta-type1 cta-gray">Take Action</a>
          </p>
        </div>
      </div>
    </li>
    <li class="unit size1of3">
      <div class="panel-obj">
        <img src="http://placehold.it/600x400" alt="" />
        <div class="caption">
          <h3>Panel Heading</h3>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh.</p>
          <p><a href="#" class="cta-type1 cta-gray">Take Action</a>
          </p>
        </div>
      </div>
    </li>
    <li class="unit size1of3">
      <div class="panel-obj">
        <img src="http://placehold.it/600x400" alt="" />
        <div class="caption">
          <h3>Panel Heading</h3>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh.</p>
          <p><a href="#" class="cta-type1 cta-gray">Submit</a>  <a href="#" class="cta-type1 cta-gray">Take Action</a>
          </p>
        </div>
      </div>
    </li>
  </ul>
</div>
  • Panel Heading

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Take Action

  • Panel Heading

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Take Action

  • Panel Heading

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Take Action



Non-skinned Panel Objects without image

View Markup


<div class="line">
  <ul class="no-bullets">
    <li class="unit size1of3">
      <div class="media media-body panel-obj">
        <h3 class="media-heading">Panel Heading</h3>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
        <p><a href="#" class="cta-type1 cta-blue">Take Action</a>
        </p>
      </div>
    </li>
    <li class="media unit size1of3">
      <div class="media-body panel-obj">
        <h3 class="media-heading">Panel Heading</h3>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
        <p><a href="#" class="cta-type1 cta-blue">Take Action</a>
        </p>
      </div>
    </li>
    <li class="unit size1of3">
      <div class="media media-body panel-obj">
        <h3 class="media-heading">Panel Heading</h3>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
        <p><a href="#" class="cta-type1 cta-blue">Take Action</a>
        </p>
      </div>
    </li>
  </ul>
</div>
  • Panel Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Take Action

  • Panel Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Take Action

  • Panel Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Take Action


Staff Bio Rollup

Note: Bio images must be exactly 255px x 300px.

View Markup


<div class="line">
  <ul class="panel-objs no-bullets BioRollUp_Staff">
    <li class="unit size1of4">
      <div class="panel-obj">
        <img src="http://placehold.it/255x300" class="ms-rteImage-dpu1 size4of5" alt="" />
        <div class="caption">
          <h3 class="medium">John Smith</h3>
          <ul class="small no-bullets">
            <li>Professor (title)</li>
            <li>Phone: <a href="tel:312-222-7092">(312) 222-7092</a>
            </li>
            <li>Room # / Building (short addy)</li>
            <li><a href="mailto:jsmith204@depaul.edu">email@depaul.edu</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="unit size1of4">
      <div class="panel-obj">
        <img src="http://placehold.it/255x300" class="ms-rteImage-dpu1 size4of5" alt="" />
        <div class="caption">
          <h3 class="medium">John Smith</h3>
          <ul class="small no-bullets">
            <li>Professor (title)</li>
            <li>Phone: <a href="tel:312-222-7092">(312) 222-7092</a>
            </li>
            <li>Room # / Building (short addy)</li>
            <li><a href="mailto:jsmith204@depaul.edu">email@depaul.edu</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="unit size1of4">
      <div class="panel-obj">
        <img src="http://placehold.it/255x300" class="ms-rteImage-dpu1 size4of5" alt="" />
        <div class="caption">
          <h3 class="medium">John Smith</h3>
          <ul class="small no-bullets">
            <li>Professor (title)</li>
            <li>Phone: <a href="tel:312-222-7092">(312) 222-7092</a>
            </li>
            <li>Room # / Building (short addy)</li>
            <li><a href="mailto:jsmith204@depaul.edu">email@depaul.edu</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="unit size1of4">
      <div class="panel-obj">
        <img src="http://placehold.it/255x300" class="ms-rteImage-dpu1 size4of5" alt="" />
        <div class="caption">
          <h3 class="medium">John Smith</h3>
          <ul class="small no-bullets">
            <li>Professor (title)</li>
            <li>Phone: <a href="tel:312-222-7092">(312) 222-7092</a>
            </li>
            <li>Room # / Building (short addy)</li>
            <li><a href="mailto:jsmith204@depaul.edu">email@depaul.edu</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>


Media Objects in list

View Markup


<ul class="media-list no-bullets">
  <li class="media">
    <a class="unit nopadding-left" href="#">
      <img class="media-obj" src="http://placehold.it/150x150" alt="" />
    </a>
    <h4 class="media-heading">Media Heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
  </li>
  <li class="media">
    <a class="unit nopadding-left" href="#">
      <img class="media-obj" src="http://placehold.it/150x150" alt="" />
    </a>
    <h4 class="media-heading">Media Heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
  </li>
  <li class="media">
    <a class="unit nopadding-left" href="#">
      <img class="media-obj" src="http://placehold.it/150x150" alt="" />
    </a>
    <h4 class="media-heading">Media Heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
  </li>
</ul>
  • Media Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  • Media Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  • Media Heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Single Media Object

View Markup


<div class="media">
  <a class="unit nopadding-left" href="#">
    <img class="media-obj" src="http://placehold.it/150x150" alt="" />
  </a>
  <h4 class="media-heading">Media Heading</h4>
  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
</div>

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.


Single Media Object (with non-wrapping text)

View Markup


<div class="media">
  <a class="unit nopadding-left" href="#">
    <img class="media-obj" src="http://placehold.it/150x150" alt="" />
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media Heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate.</p>
  </div>
</div>

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.



Responsive Google Maps iFrame

View Markup

​​​

<iframe width="100%" height="400" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1484.248170735164!2d-87.6494886!3d41.92518480000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fd31ab60f50b3%3A0x3af05e55fd15c88a!2s804+W+Belden+Ave%2C+DePaul+University+Lincoln+Park+Campus+Welcome+Center%2C+Chicago%2C+IL+60614!5e0!3m2!1sen!2sus!4v1412113497546" style="border: 0px none;"></iframe>