SharePoint Responsive > Visual Guides > Single Content Objects

Single Content Objects

​​Single Panel Objects allow you to structure your content and create calls-to-action via the below HTML markup. They are commonly used in web part areas within the HTML web part on home pages *.

These will not be used on a regular page layout or in a main content area - see Body Content Objects for main content area objects. For home pages, 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 markup examples that you can copy and paste to use in your site.

Social Media Icons



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



Full-width Button



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


Panel Object with Image



        <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



        <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



        <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



        <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 



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

* Looking to add panel objects side-by-side in a main content area? See Body Content Objects.




See below examples

Social Media Icons

 

Full-width Button

Sidebar CTA

Panel Object with Image

Panel Objects

Our faculty are not only experienced and admired educators, but are some of the world's finest and most respected conductors, composers, performers and recording artists.

Take Action

Panel Object without Image

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 Object with List

Panel heading

Cras sit amet nibh libero, in gravida nulla.

Panel Object with Image and Icons

Learn With the Best

Our faculty are not only experienced and admired educators, but are some of the world's finest and most respected conductors, composers, performers and recording artists.

 

Social Media Panel Object

Connect with us...

Check us out on Twitter and Facebook.

 

​