SharePoint Information Site > Visual Guides > Single Content Objects

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

Use the HTML Web Part to put one in a web part area, or edit an existing one by clicking Edit Item. If you are not comfortable editing HTML5, put in a TSC Ticket and a Content Administrator will help you.

See right for visual display and below for the corresponding code examples.

Social Media Icons

View Markup


​​​<p class="skin-social">
  <a class="twitter social-blue" href="#"></a>
  <a class="fb social-blue" href="#"></a>
  <a class="linkedin social-blue" href="#"></a>
  <a class="youtube social-blue" href="#"></a>
  <a class="pinterest social-blue" href="#"></a>
</p>

Sidebar Button

View Markup


<p><a class="cta-type1 cta-blue2 block" href="#">Sidebar CTA</a></p>


Panel Object with Image

View Markup


<div class="media skinsstructure1 skin-simple-gray">
  <div class="media-body panel-obj">
    <h3 class="media-heading">Learn With the Best</h3>
      <img src="http://placehold.it/600x400" alt=""/>
    <p>Our faculty are not only experienced and admired educators, but are some of the world's most respected conductors, composers and performers.</p>
    <p><a class="cta-type1 cta-blue2" href="#">Take Action</a>
    </p>
  </div>
</div>


Panel Object without Image

View Markup


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


Panel Object with List

View Markup

​​​

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


Panel Object with Image and Icons

View Markup


<div class="media skinsstructure1 skin-simple-gray">
  <div class="media-body panel-obj">
    <h3 class="media-heading">Learn With the Best</h3>
    <img src="http://placehold.it/600x400" alt="" />
    <p>Our faculty are not only experienced and admired educators, but are some of the world's most respected conductors, composers and performers.</p>
    <p class="skin-social">
      <a class="twitter social-blue"></a>
      <a class="fb social-blue"></a>
      <a class="linkedin social-blue"></a>
    </p>
  </div>
</div>

Social Media Panel Object

View Markup


<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 Twitter and Facebook.</p>
    <p class="skin-social">
      <a class="twitter social-gray" a href="#"></a>
      <a class="fb social-gray" a href="#"></a>
    </p>
  </div>
</div>