SharePoint Responsive > Visual Guides > Body Content Objects

Body Content Objects

​​​​​Body Content Objects are panel objects created to help structure content and create calls-to-action. They are most useful on home pages and landing pages to guide users to sub-pages or to complete important actions. 

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 Two Column layouts in groups of threes, and in Three Column layouts in groups of two.

(The below markup is for sets of three, so if you're using a Three Column Layout, adjust the li class="unit size1of3" to "size1of2" and close the ul and first div of the second object, then open a new one to create a new row)

See below for visual examples and markup that you can copy and paste into your site.

Skinned Panel Objects with image



    <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



    <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



    <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



    <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



    <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. 



    <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



    <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


    
    <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)



<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.



Responsive Google Maps iFrame



        <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>


​