SharePoint Responsive > Visual Guides > College Site Styles

College Site Styles

In January 2018, WebCom began applying new design treatments to DePaul’s college websites, including new CSS. Pages using old classes for items such as Panel Objects and Buttons were updated at the time of conversion. Site editors wishing to add panel objects to new pages should use the markup below.

Panel Objects



<div class="grid">

      <div class="col_sm-12">
        <div class="card-panel card-panel--blue">

          <img class="img-fluid" src="http://placehold.it/720x480">

          <div class="p15-l p15-r">
            <h2 class="text-green">First Panel Header</h2>
            <p>Lorem ipsum dolor sit amet, ceonsectetur adipiscing elit.</p>
          </div>

          <a href="#" class="cta-college cta-blue--ghost">Learn More</a>

        </div>
      </div>

      <div class="col_sm-12">
        <div class="card-panel card-panel--blue">

          <img class="img-fluid" src="http://placehold.it/720x480">

          <div class="p15-l p15-r">
            <h2 class="text-green">Second Panel Header</h2>
            <p>Lorem ipsum dolor sit amet, ceonsectetur adipiscing elit.</p>
          </div>

          <a href="#" class="cta-college cta-blue--ghost">Learn More</a>


        </div>
      </div>

      <div class="col_sm-12">
        <div class="card-panel card-panel--blue">

          <img class="img-fluid" src="http://placehold.it/720x480">

          <div class="p15-l p15-r">
            <h2 class="text-green">Third Panel Header</h2>
            <p>Lorem ipsum dolor sit amet, ceonsectetur adipiscing elit.</p>
          </div>

          <a href="#" class="cta-college cta-blue--ghost">Learn More</a>


        </div>
      </div></div>
                


    <div class="grid-noGutter m15-b">
      <div class="col-6_sm-12 p0-a bg-cover pos-relative min-height-300" style="background-image: url('http://placehold.it/600x300')">
        <div class="triangle-bl border-b-blue--light hide-mobile"></div>
      </div>
      <div class="col-6_sm-12 bg-blue--light p45-a">
        <h2 class="text-blue--dark m0-t">First Header</h2>
        <p class="text-blue">Lorem ipsum dolor sit amet, adhuc legimus mea no, animal ocurreret conclusionemque qui ea. At causae voluptatibus duo. Vix id affert salutandi, mel ad ludus eirmod torquatos.</p>
        <a class="cta-college cta-blue--ghost" href=&quot;javascript:void();&quot;>Learn More</a>
      </div>
    </div>

    <div class="grid-noGutter m15-b grid-reverse">
      <div class="col-6_sm-12 p0-a bg-cover pos-relative min-height-300" style="background-image: url('http://placehold.it/600x300')">
        <div class="triangle-br border-b-blue--light hide-mobile"></div>
      </div>
      <div class="col-6_sm-12 bg-blue--light p45-a">
        <h2 class="text-blue--dark m0-t">Second Header</h2>
        <p class="text-blue">Lorem ipsum dolor sit amet, adhuc legimus mea no, animal ocurreret conclusionemque qui ea. At causae voluptatibus duo. Vix id affert salutandi, mel ad ludus eirmod torquatos.</p>
        <a class="cta-college cta-blue--ghost" href=&quot;javascript:void();&quot;>Learn More</a>
      </div>
    </div>

    <div class="grid-noGutter">
      <div class="col-6_sm-12 p0-a bg-cover pos-relative min-height-300" style="background-image: url('http://placehold.it/600x300')">
        <div class="triangle-bl border-b-blue--light hide-mobile"></div>
      </div>
      <div class="col-6_sm-12 bg-blue--light p45-a">
        <h2 class="text-blue--dark m0-t">Third Header</h2>
        <p class="text-blue">Lorem ipsum dolor sit amet, adhuc legimus mea no, animal ocurreret conclusionemque qui ea. At causae voluptatibus duo. Vix id affert salutandi, mel ad ludus eirmod torquatos.</p>
        <a class="cta-college cta-blue--ghost" href=&quot;javascript:void();&quot;>Learn More</a>
      </div>
    </div>
                




 <div class="grid-noGutter">

      <div class="col-6_sm-12 p0-a bg-cover pos-relative min-height-300" data-bgimg="http://placehold.it/1280x1280">

      </div>

      <div class="col-6_sm-12 p45-a">

        <h2 class="text-blue h1 m0-t">First Header</h2>

        <p>Lorem ipsum dolor sit amet, adhuc legimus mea no, animal ocurreret conclusionemque qui ea. At causae voluptatibus duo. Vix id affert salutandi, mel ad ludus eirmod torquatos. Quo eros soluta oporteat at, graeci malorum graecis ex nec. </p>

        <a class="cta-college cta-blue--ghost" href=&quot;javascript:void();&quot;>Learn More</a>

      </div>

    </div>

<div class="grid-noGutter grid-reverse">

      <div class="col-6_sm-12 p0-a bg-cover pos-relative min-height-300" data-bgimg="http://placehold.it/1280x1280">

      </div>

      <div class="col-6_sm-12 p45-a">

        <h2 class="text-blue h1 m0-t">Second Header</h2>

        <p>Lorem ipsum dolor sit amet, adhuc legimus mea no, animal ocurreret conclusionemque qui ea. At causae voluptatibus duo. Vix id affert salutandi, mel ad ludus eirmod torquatos. Quo eros soluta oporteat at, graeci malorum graecis ex nec.</p>

        <a class="cta-college cta-blue--ghost" href=&quot;javascript:void();&quot;>Learn More</a>

      </div>

    </div> </pre><c/ode>

                



<div class="grid">
		<div class="col_sm-12">
			<div class="p30-a b2-a border-teal--med">
				<h2 class="h1 m0-t thin text-blue--med2">Left Header</h2>
				<p>Lorem ipsum dolor sit amet, adhuc legimus mea no...</p>
				<a class="cta-college cta-blue--ghost" href=&quot;javascript:void();&quot;>Learn More</a>
			</div>
		</div>
		<div class="col_sm-12">
			<div class="p30-a b2-a border-teal--med">
				<h2 class="h1 m0-t thin text-blue--med2">Right Header</h2>
				<p>Lorem ipsum dolor sit amet, adhuc legimus mea no...</p>
				<a class="cta-college cta-blue--ghost" href=&quot;javascript:void();&quot;>Learn More</a>
			</div>
		</div>
	</div>
                

Examples

Card panels, three across:

Card panels, three across

Split panels, stacked with slash:

Split panels, stacked with slash

Split panels, stacked squares:

Split panels, stacked with slash

Card panels, two across, no images:

Two card panel