Content Types

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div id="accordion" role="tablist" aria-multiselectable="true">
  	<div class="card">
  		<div class="card-header" role="tab" id="headingOne">
  			<h5 class="mb-0">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
          </a>
        </h5>
  		</div>
  
  		<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
  			<div class="card-body">
  				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
  				on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw
  				denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  			</div>
  		</div>
  	</div>
  	<div class="card">
  		<div class="card-header" role="tab" id="headingTwo">
  			<h5 class="mb-0">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
          </a>
        </h5>
  		</div>
  		<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
  			<div class="card-body">
  				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
  				on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw
  				denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  			</div>
  		</div>
  	</div>
  	<div class="card">
  		<div class="card-header" role="tab" id="headingThree">
  			<h5 class="mb-0">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Collapsible Group Item #3
          </a>
        </h5>
  		</div>
  		<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
  			<div class="card-body">
  				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
  				on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw
  				denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  			</div>
  		</div>
  	</div>
  </div>

Agenda

A responsive agenda for events.

9:15 - 9:30 AM
Title with No Description
10:15 - 11:30 AM
Title of Event

Speaker Name

Speaker's Title

Title of Event

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet animi cum dolores eaque earum error fugiat harum labore maiores numquam, praesentium quaerat, quos saepe similique tempore vel vitae voluptatibus?

Speaker's Biography

11:30 - 1:00 PM
Lunch
<div class="agenda bg-faded">
  	<div class="row py-4 py-md-2 px-2">
  		<div class="col-md-2">9:15 - 9:30 AM</div>
  		<div class="col-md-3"></div>
  		<div class="col-md-7">
  			<h5>Title with No Description</h5>
  		</div>
  	</div>
  	<div class="row py-4 py-md-2 px-2">
  		<div class="col-md-2">10:15 - 11:30 AM<br />
  			<h5 class="d-md-none">Title of Event</h5></div>
  		<div class="col-md-3">
  			<img class="img-fluid" data-src="holder.js/100px180/">
  		</div>
  		<div class="col-md-7">
  			<p class="mb-0">Speaker Name</p>
  			<small class="text-muted">Speaker's Title</small>
  			<h4 class="d-none d-md-block">Title of Event</h4>
  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet animi cum dolores eaque earum error fugiat harum labore maiores numquam, praesentium quaerat, quos saepe similique tempore vel vitae voluptatibus?</p>
  			<p><a href="#"><i class="fa fa-file-pdf-o"></i> Speaker's Biography</a></p>
  		</div>
  	</div>
  	<div class="row py-4 py-md-2 px-2">
  		<div class="col-md-2">11:30 - 1:00 PM</div>
  		<div class="col-md-3"></div>
  		<div class="col-md-7">
  			<h5>Lunch</h5>
  		</div>
  	</div>
  </div>

Announcement

Announcement

This is an announcement

Emergency Announcement

This is an emergency announcement

Upcoming Deadline

There is an upcoming deadline for new applications.

Light Announcement

Good for calling out information.

Dark Announcement

This is a darker-styled announcement pane. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi et ipsum quae vero voluptatem. Ad aut delectus dolore ea esse id laboriosam mollitia numquam odio quis quos repudiandae, sequi sint!

<div class="announcement module mb-3">
  	<h3 class="text-uppercase">Announcement</h3>
  	<div class="p-3">
  		<p>This is an <a href="#">announcement</a></p>
  	</div>
  </div>
  
  <div class="announcement announcement-danger mb-3">
  	<h3 class="text-uppercase">Emergency Announcement</h3>
  	<div class="p-3">
  		<p>This is an emergency announcement</p>
  	</div>
  </div>
  
  <div class="announcement announcement-navy mb-3">
  	<h3>Upcoming Deadline</h3>
  	<div class="p-3">
  		<p>There is an <a href="#">upcoming deadline</a> for new applications.</p>
  	</div>
  </div>
  
  <div class="announcement announcement-light mb-3">
  	<h3 class="text-uppercase">Light Announcement</h3>
  	<div class="p-3">
  		<p>Good for calling out information.</p>
  	</div>
  </div>
  
  <div class="announcement announcement-dark mb-3">
  	<h3 class="text-uppercase">Dark Announcement</h3>
  	<div class="p-3">
  		<p>This is a darker-styled announcement pane. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi et ipsum quae vero voluptatem. Ad aut delectus dolore ea esse id laboriosam mollitia numquam odio quis quos repudiandae, sequi sint!</p>
  	</div>
  </div>

Blocks

A basic block

Use these to package stackable, image driven content.
Here's a link!

An inverse block

Use the inverse modifier for working over dark images.
Woah what's that! Another link?

An embed block

Use block-background to integrate interactive backgrounds.
With a fancy link

<div class="block text-center">
  	<h1 class="block-title">A basic block</h1>
  	<h4 class="text-muted">Use these to package stackable, image driven content.<br /><a href="#">Here's a link!</a></h4>
  	<button class="btn btn-primary mt">With a simple button</button>
  </div>
  
  <div class="block block-inverse text-center">
  	<h1 class="block-title">An inverse block</h1>
  	<h4 class="text-muted">Use the inverse modifier for working over dark images.<br /><a href="#" class="text-white">Woah what's that! Another link?</a></h4>
  	<button class="btn btn-primary mt">With a simple button</button>
  </div>
  
  <div class="block block-inverse text-center">
  	<div class="block-foreground">
  		<h1 class="block-title">An embed block</h1>
  		<h4 class="text-muted">Use block-background to integrate interactive backgrounds.<br /><a href="#" class="text-white">With a fancy link</a></h4>
  		<button class="btn btn-default btn-outline mt">With a simple button</button>
  	</div>
  	<div class="block-background">
  		<iframe frameBorder="0" src="https://a.tiles.mapbox.com/v4/jacobthornton.6681fb42/attribution.html?access_token=pk.eyJ1IjoiamFjb2J0aG9ybnRvbiIsImEiOiJlMGRmZmJlNDZkNDhlN2EzMTQ0YWFiNjhlN2RiZWY1ZCJ9.hO-UNIIplnebJYkya-8TEQ"></iframe>
  	</div>
  </div>

Button

SCU Buttons
.maroon .link-button.brand-primary .link-button.brand-secondary .link-button.brand-secondary
Standard Buttons
Secondary Buttons
Outline Buttons
<h5>SCU Buttons</h5>
  <a href="#" class="maroon link-button" role="button">.maroon</a>
  <a href="#" class="brand-primary link-button" role="button">.link-button.brand-primary</a>
  <a href="#" class="brand-secondary link-button" role="button">.link-button.brand-secondary</a>
  <a href="#" class="brand-secondary link-button" role="button">.link-button.brand-secondary</a>
  
  <hr>
  <h5>Standard Buttons</h5>
  
  <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  <button type="button" class="btn btn-primary">Primary</button>
  <!-- Secondary, outline button -->
  <button type="button" class="btn btn-secondary">Secondary</button>
  <!-- Indicates a successful or positive action -->
  <button type="button" class="btn btn-success">Success</button>
  <!-- Contextual button for informational alert messages -->
  <button type="button" class="btn btn-info">Info</button>
  <!-- Indicates caution should be taken with this action -->
  <button type="button" class="btn btn-warning">Warning</button>
  <!-- Indicates a dangerous or potentially negative action -->
  <button type="button" class="btn btn-danger">Danger</button>
  <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
  <button type="button" class="btn btn-link">Link</button>
  
  <h5 class="mt-4">Secondary Buttons</h5>
  
  <button type="button" class="btn btn-stone">Stone</button>
  <button type="button" class="btn btn-beige">Beige</button>
  <button type="button" class="btn btn-navy">Navy</button>
  
  <h5 class="mt-3">Outline Buttons</h5>
  <button type="button" class="btn btn-outline-default">Default</button>
  <button type="button" class="btn btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-success">Success</button>
  <button type="button" class="btn btn-outline-info">Info</button>
  <button type="button" class="btn btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-outline-danger">Danger</button>
  
  <button type="button" class="btn btn-outline-light">Warning</button>
  <button type="button" class="btn btn-outline-dark">Danger</button>
  <button type="button" class="btn btn-outline-navy">Danger</button>

Calendar

  • Jul
    26

    Freedom of Religion Under Attack Around the World

    12:00pm, St. Clare Room

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi, distinctio eligendi, enim ipsum laboriosam minima necessitatibus nulla numquam ratione, totam ut. Ab aliquam aspernatur atque ipsum maiores sint temporibus.

<div class="events module">
  	<ul class="media-list">
  		<li class="media">
  			<div class="media-left">
  				<div class="events-date-page">
  					<div class="events-month">Jul</div>
  					<div class="events-day">26</div>
  				</div>
  			</div>
  			<div class="media-body">
  				<h4 class="media-heading">
            <a href="/events/#!view/event/event_id/37769">Freedom of Religion Under Attack Around the World</a></h4>
  				<p class="events-time-and-location">12:00pm, St. Clare Room</p>
  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi, distinctio eligendi, enim ipsum laboriosam minima necessitatibus nulla numquam ratione, totam ut. Ab aliquam aspernatur atque ipsum maiores sint temporibus.</p>
  			</div>
  		</li>
  	</ul>
  </div>

Card

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Card title

Here's a card similar to the "apply" style used on Admission pages.

Card as Panel

This replaces a panel.

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="row">
  	<!-- Simple Card -->
  	<div class="col">
  		<div class="card">
  			<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
  			<div class="card-body">
  				<h4 class="card-title">Card title</h4>
  				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
  				</p>
  				<a href="#" class="btn btn-primary">Go somewhere</a>
  			</div>
  		</div>
  	</div>
  	<!-- Card with Image Block -->
  	<div class="col">
  		<div class="card">
  			<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
  			<div class="card-body">
  				<h4 class="card-title">Card title</h4>
  				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
  				</p>
  			</div>
  			<ul class="list-group list-group-flush">
  				<li class="list-group-item">Cras justo odio</li>
  				<li class="list-group-item">Dapibus ac facilisis in</li>
  				<li class="list-group-item">Vestibulum at eros</li>
  			</ul>
  			<div class="card-body">
  				<a href="#" class="card-link">Card link</a>
  				<a href="#" class="card-link">Another link</a>
  			</div>
  		</div>
  	</div>
  	<!-- Colored card with inverted text -->
  	<div class="col">
  		<div class="card card-inverse card-primary text-xs-center">
  			<div class="card-body">
  				<h4 class="card-title">Card title</h4>
  				<p class="card-text">Here's a card similar to the "apply" style used on Admission pages.</p>
  				<button class="btn btn-outline-secondary">Apply Now</button>
  			</div>
  		</div>
  		<div class="card mt-3">
  			<div class="card-header">
  				Card as Panel
  			</div>
  			<div class="card-body">
  				<h4 class="card-title">This replaces a panel.</h4>
  				<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  				<a href="#" class="btn btn-primary">Go somewhere</a>
  			</div>
  		</div>
  	</div>
  </div>

Highlight

Broncos. Horsepower.

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Broncos. Horsepower.

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Broncos. Horsepower.

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

<h1 class="mt-0 text-highlight">
    <strong class="highlight highlight--wrapping">
      Broncos. Horsepower.
    </strong>
  </h1>
  <p class="mt-4 text-highlight lead">
  	<span class="highlight highlight--wrapping">
      Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.
    </span>
  </p>
  
  
  <h2 class="mt-0 text-highlight text-highlight-dark">
    <strong class="highlight highlight--wrapping">
      Broncos. Horsepower.
    </strong>
  </h2>
  <p class="mt-4 text-highlight text-highlight-dark">
  	<span class="highlight highlight--wrapping">
      Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.
    </span>
  </p>
  
  <h2 class="mt-5 text-highlight text-highlight-stone">
    <strong class="highlight highlight--wrapping">
      Broncos. Horsepower.
    </strong>
  </h2>
  <p class="mt-4 text-highlight text-highlight-stone">
  	<span class="highlight highlight--wrapping">
      Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.
    </span>
  </p>

Infographic

Infographics adapt badge styling for highlighting information. Backgrounds are selected by their named color (.badge-primary, .badge-navy, etc), along with font combinations (.text-sans-bold, .text-serif, and .text-serif-bold). Use .display classes to adjust size of the statistic itself. Adapts to the size of its parent container.

100,405

Trees Saved

100%

Participation

1.0k

Squirrels on Campus

14

Short Titles

70,000

Squirrels on Campus

95%

This is an extremely large stat with a very long description using .display-1.

<div class="row">
  	<div class="col-sm-12">
  		<div class="badge badge-primary infographic p-3 mb-3 text-center">
  			<p class="statcard-number text-serif">100,405</p>
  			<p class="infographic-label text-inverted text-sans-light mt-2 text-uppercase">Trees Saved</p>
  			<p class="statcard-number text-serif mt-3">100%</p>
  			<p class="infographic-label text-inverted text-sans-light text-uppercase mt-2 mb-0">Participation</p>
  		</div>
  	</div>
  	<div class="col-sm-12">
  		<div class="badge badge-navy infographic p-3 mb-2 text-center">
  			<p class="statcard-number text-sans-light">1.0k</p>
  			<p class="infographic-label text-sans-light text-uppercase mt-2 mb-0">Squirrels on Campus</p>
  		</div>
  		<div class="badge badge-beige infographic p-3 mb-2 text-center">
  			<p class="statcard-number display-3 text-sans=bold">14</p>
  			<p class="infographic-label text-sans-light text-uppercase mt-2 mb-0">Short Titles</p>
  		</div>
  		<div class="badge badge-stone infographic p-3 text-center">
  			<p class="statcard-number display-4 text-sans-light text-white">70,000</p>
  			<p class="infographic-label text-inverted text-sans-light text-uppercase mt-2 mb-0">Squirrels on Campus</p>
  		</div>
  	</div>
  	<div class="col-sm-12">
  		<div class="badge bg-gradient infographic p-5 p-sm-2 m-b my-3 text-center">
  			<p class="statcard-number text-serif-bold">95%</p>
  			<p class="infographic-label text-sans-light text-uppercase mt-2 mb-0">This is an extremely large stat with a very long description using .display-1.</p>
  		</div>
  	</div>
  </div>

Jumbotron

Jumbotrons are full-width, image-driven content types deployed in different formats for core landing pages and interior landing pages. Use .has-dim to increase contrast.

Landing Page

Jumbotrons: All the Rage.

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container, and you can even have links.

Learn more

No Image? No Problem.

Here's a straight-up jumbotron with a cool gradient fade. Slightly different than a hero.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

SCU Multicultural Center's annual Global Village Festival celebrates our diverse campus with food, activities, and performances.

Landing Page

<!-- Hero for Core Landing Pages -->
  <div class="jumbotron jumbotron-fluid hero has-dim-6 p-0" style="background-image:url(/assets/images/examples/roadshow/seattle.jpg);">
  	<h1>Landing Page</h1>
  	<div class="container py-5">
  		<div class="jumbotron-body high-contrast p-3">
  			<h2>Jumbotrons: All the Rage.</h2>
  			<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  			<hr class="my-4">
  			<p>It uses utility classes for typography and spacing to space content out within the larger container, <a href="#" class="text-light">and you can even have links</a>.</p>
  			<p class="lead">
  				<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  			</p>
  		</div>
  	</div>
  </div>
  <div class="jumbotron jumbotron-fluid bg-gradient p-0">
  	<div class="container py-5">
  		<h1>No Image? No Problem.</h1>
  		<p class="lead">Here's a straight-up jumbotron with a cool gradient fade. Slightly different than a hero.</p>
  		<hr class="my-4">
  		<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  		<p class="lead">
  			<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  		</p>
  	</div>
  </div>
  <div class="jumbotron jumbotron-fluid hero has-dim p-0" style="background-image:url(/assets/images/examples/roadshow/seattle.jpg);">
  	<div class="caption col-9 col-md-4">SCU Multicultural Center's annual Global Village Festival celebrates our diverse campus with food, activities, and performances.
  	</div>
  	<h1>Landing Page</h1>
  </div>
  <!-- Hero for Interior Pages -->

List Item

Generic placeholder image
Top-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  	<img class="d-flex align-self-start mr-3" src="/assets/images/examples/ghana.jpg" alt="Generic placeholder image" style="width: 100px">
  	<div class="media-body">
  		<h5 class="mt-0">Top-aligned media</h5>
  		<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  		<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  	</div>
  </div>

Person Spotlight

Department

Elspeth Rosetti


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem deleniti dolores exercitationem iusto laborum, molestias nam nesciunt nihil nostrum praesentium tenetur vel, veritatis. Beatae impedit obcaecati optio qui sed!

Read More

Transforming Communities

Gordon Young


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, beatae consectetur distinctio esse fugit hic iste laborum nihil officia, possimus quo, rem sunt! Consectetur laudantium magni porro tenetur. Ab, mollitia.

Read More
<div class="row no-gutters person-spotlight">
  	<div class="col-12 col-md-6 spotlight-image" style="background-image:url(/assets/images/elspeth-rossetti-750x270.jpg);"></div>
  	<div class="col-12 col-md-6 p-4 text-white bg-primary">
  		<h6 class="text-sans-light mb-0">Department</h6>
  		<h2 class="text-sans-bold">Elspeth Rosetti</h2>
  		<hr />
  		<p class="text-sans-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem deleniti dolores exercitationem iusto laborum, molestias nam nesciunt nihil nostrum praesentium tenetur vel, veritatis. Beatae impedit obcaecati optio qui sed!</p>
  		<a href="#" class="btn btn-primary">Read More</a>
  	</div>
  </div>
  <br />
  <div class="row no-gutters person-spotlight">
  	<div class="col-12 col-md-6 p-4 text-white bg-gradient-primary">
  		<p class="text-sans-light mb-1 text-uppercase small">Transforming Communities</p>
  		<h2 class="text-sans-bold">Gordon Young</h2>
  		<hr />
  		<p class="text-sans-light">Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Aliquid, beatae consectetur distinctio esse fugit hic iste laborum nihil officia, possimus quo, rem sunt! Consectetur laudantium magni porro tenetur. Ab, mollitia.</p>
  		<a href="#" class="btn btn-primary">Read More</a>
  	</div>
  	<div class="col-12 col-md-6 spotlight-image bg-img-right-center" style="background-image:url(/assets/images/gordon-young-2-750x270.jpg);"></div>
  </div>

Pull Quote

Use a 300x300 minimum square image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quia quidem ratione voluptas. Ab accusantium aperiam consectetur dolor dolore dolorem, facilis fuga, mollitia possimus quam quia repellendus sequi suscipit, vel.

Speaker Name, (their title)

Relevant University Department

Placeholder

Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias assumenda dolorem ducimus ex hic id iste itaque molestias nam nesciunt, quas quod rem. Asperiores autem et mollitia natus nisi, non.

Speaker Name, (their title)

Relevant University Department

<div class="row pull-quote d-flex">
  	<div class="col-md-8 col-12">
  		<blockquote class="blockquote text-sans-light text-sm-center text-md-left text-white">
  			<p class="mt-2 pt-3 pl-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Excepturi quia quidem ratione voluptas.</a> Ab accusantium aperiam consectetur dolor dolore dolorem, facilis fuga, mollitia possimus quam quia repellendus sequi suscipit, vel.</p>
  			<footer class="blockquote-footer text-right">
  				<cite title="Source Title">Speaker Name</cite>, (their title)
  				<p>Relevant University Department</p>
  			</footer>
  		</blockquote>
  	</div>
  	<div class="col-md-4 col-12">
  		<img src="holder.js/300x300?auto=yes" alt="Placeholder" class="d-block mx-auto rounded-circle img-fluid" />
  	</div>
  </div>
  
  <br />
  
  <div class="row pull-quote-inv">
  	<div class="col-md-4 col-12">
  		<img src="holder.js/300x300?auto=yes" alt="Placeholder" class="d-block mx-auto rounded-circle img-fluid" />
  	</div>
  	<div class="col-md-8 col-12">
  		<blockquote class="blockquote text-sans-light text-sm-center text-md-left">
  			<p class="mt-2 pt-3 pl-3">Lorem ipsum dolor sit amet, <a href="@">consectetur adipisicing elit.</a> Alias assumenda dolorem ducimus ex hic id iste itaque molestias nam nesciunt, quas quod rem. Asperiores autem et mollitia natus nisi, non.</p>
  			<footer class="blockquote-footer text-right">
  				<cite title="Source Title">Speaker Name</cite>, (their title)
  				<p>Relevant University Department</p>
  			</footer>
  		</blockquote>
  	</div>
  </div>

Site Pointer

<div class="row">
  	<div class="col">
  		<a href="https://www.scu.edu/rooms/" class="site-pointer">
  			<img data-src="holder.js/100px350/" alt="The Learning Commons and Library">
  			<span class="site-pointer-body p-3">Library Room Reservations</span>
  		</a>
  	</div>
  	<div class="col">
  		<a href="https://www.scu.edu/rooms/" class="site-pointer site-pointer-navy">
  			<img data-src="holder.js/100px300/" alt="The Learning Commons and Library">
  			<span class="site-pointer-body p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci alias aliquid commodi deleniti ducimus enim eum, fuga, fugit itaque natus nesciunt nisi, praesentium quas reprehenderit sint sit soluta voluptatem?</span>
  		</a>
  	</div>
  	<div class="col">
  		<a href="https://www.scu.edu/rooms/" class="site-pointer site-pointer-stone">
  			<img data-src="holder.js/100px250/" alt="The Learning Commons and Library">
  			<span class="site-pointer-body p-3">Lorem Ipsum Dolor</span>
  		</a>
  	</div>
  </div>

Social Icons

<div class="one-column social-grid module">
  	<div class="social">
  		<a class="facebook" href="http://www.facebook.com">
  			<i class="demo-icon icon-facebook-squared"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="twitter" href="http://www.twitter.com">
  			<i class="demo-icon icon-twitter"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="youtube" href="http://youtube.com">
  			<i class="demo-icon icon-youtube"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="pinterest" href="http://www.pinterest.com">
  			<i class="demo-icon icon-pinterest"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="instagram" href="http://www.instagram.com">
  			<i class="fa fa-instagram"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="vimeo" href="http://vimeo.com">
  			<i class="demo-icon icon-vimeo"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="rss" href="http://www.npr.org/rss/rss.php?id=1001">
  			<i class="demo-icon icon-rss"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="flickr" href="http://www.flickr.com">
  			<i class="demo-icon icon-flickr"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="soundcloud" href="http://soundcloud.com">
  			<i class="demo-icon icon-soundcloud"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="linkedin" href="http://www.linkedin.com">
  			<i class="demo-icon icon-linkedin"></i>
  		</a>
  	</div>
  	<div class="social">
  		<a class="illuminate" href="http://www.scu.edu/illuminate"></a>
  	</div>
  	<div class="social">
  		<a class="scu" href="http://www.scu.edu"><i class="icon-scu"></i></a>
  	</div>
  </div>

Statcards

Use stat cards to easily display large numbers, great for any kind of simple metrics and dashboard content.

12,938

Page views

758

Downloads

1,293

Sign-ups

12,938 5%

Page views

758 1.3%

Downloads

12,938 5%

Page views

758 1.3%

Downloads

758 1.3%

Downloads

1,293 6.75%

Sign-ups

1,293 6.75%

Sign-ups
<div class="statcard p-3">
  	<h3 class="statcard-number">12,938</h3>
  	<span class="statcard-desc">Page views</span>
  </div>
  <div class="statcard p-3 text-center">
  	<h3 class="statcard-number">758</h3>
  	<span class="statcard-desc">Downloads</span>
  </div>
  <div class="statcard p-3 text-right">
  	<h3 class="statcard-number">1,293</h3>
  	<span class="statcard-desc">Sign-ups</span>
  </div>
  <div class="statcard p-3">
  	<h3 class="statcard-number">
      12,938
      <small class="delta-indicator delta-positive">5%</small>
    </h3>
  	<span class="statcard-desc">Page views</span>
  </div>
  <div class="statcard p-3">
  	<h3 class="statcard-number">
      758
      <small class="delta-indicator delta-negative">1.3%</small>
    </h3>
  	<span class="statcard-desc">Downloads</span>
  </div>
  <div class="row">
  	<div class="col-md-2">
  		<div class="statcard statcard-primary p-3 m-b">
  			<h3 class="statcard-number">
          12,938
          <small class="delta-indicator delta-positive">5%</small>
        </h3>
  			<span class="statcard-desc">Page views</span>
  		</div>
  	</div>
  	<div class="col-md-2">
  		<div class="statcard statcard-success p-3 m-b">
  			<h3 class="statcard-number">
          758
          <small class="delta-indicator delta-negative">1.3%</small>
        </h3>
  			<span class="statcard-desc">Downloads</span>
  		</div>
  	</div>
  	<div class="col-md-2">
  		<div class="statcard statcard-info p-3 m-b">
  			<h3 class="statcard-number">
          758
          <small class="delta-indicator delta-negative">1.3%</small>
        </h3>
  			<span class="statcard-desc">Downloads</span>
  		</div>
  	</div>
  	<div class="col-md-2">
  		<div class="statcard statcard-danger p-3 m-b">
  			<h3 class="statcard-number">
          1,293
          <small class="delta-indicator delta-positive">6.75%</small>
        </h3>
  			<span class="statcard-desc">Sign-ups</span>
  		</div>
  	</div>
  	<div class="col-md-4">
  		<div class="statcard statcard-warning p-3 m-b">
  			<h3 class="statcard-number">
          1,293
          <small class="delta-indicator delta-positive">6.75%</small>
        </h3>
  			<span class="statcard-desc">Sign-ups</span>
  		</div>
  	</div>
  </div>

Tables

Tables follow Bootstrap's conventions, but classes can be applied to rows, heads, and individual cells. For example, we use .bg-primary with .text-inverted on the <thead> element here.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  	<thead class="bg-primary text-inverted">
  		<tr>
  			<th>#</th>
  			<th>First Name</th>
  			<th>Last Name</th>
  			<th>Username</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<th scope="row">1</th>
  			<td>Mark</td>
  			<td>Otto</td>
  			<td>@mdo</td>
  		</tr>
  		<tr>
  			<th scope="row">2</th>
  			<td>Jacob</td>
  			<td>Thornton</td>
  			<td>@fat</td>
  		</tr>
  		<tr>
  			<th scope="row">3</th>
  			<td>Larry</td>
  			<td>the Bird</td>
  			<td>@twitter</td>
  		</tr>
  	</tbody>
  </table>
  
  <table class="table">
  	<thead class="thead-default">
  		<tr>
  			<th>#</th>
  			<th>First Name</th>
  			<th>Last Name</th>
  			<th>Username</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<th scope="row">1</th>
  			<td>Mark</td>
  			<td>Otto</td>
  			<td>@mdo</td>
  		</tr>
  		<tr>
  			<th scope="row">2</th>
  			<td>Jacob</td>
  			<td>Thornton</td>
  			<td>@fat</td>
  		</tr>
  		<tr>
  			<th scope="row">3</th>
  			<td>Larry</td>
  			<td>the Bird</td>
  			<td>@twitter</td>
  		</tr>
  	</tbody>
  </table>

Windowpane

Windowpanes are bootstrap columns without padding/margins, which can create beautiful grid layouts.

#GoSantaClara

Welcome Weekend

Seattle

Wiley Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque dolore dolorum expedita illo illum modi, molestias nam necessitatibus nemo nihil nisi odit officiis perspiciatis quae quibusdam suscipit totam, vero.

Seattle

Wiley House

A Text Header

Short text works best here. Text can be cutoff on mobile and some desktop displays, so keep copy concise.

If you have more to say, you may want to try an overlay.

<div class="row no-gutters">
  	<div class="col-md-4 col-sm-6 windowpane bg-primary">
  		<div class="windowpane-desc introduction p-3">
  			<h4 class="text-sans-light text-uppercase"><a href="#" class="text-white">#GoSantaClara</a></h4>
  			<h1 class="text-serif text-white mt-4">Welcome Weekend</h1>
  		</div>
  	</div>
  	<div class="col-md-4 col-sm-6 windowpane has-overlay bg-img-left-center" style="background-image: url('/assets/images/examples/roadshow/seattle.jpg');">
  		<div class="windowpane-overlay p-3 text-sans-light">
  			<p class="h3 mb-0">Seattle</p>
  			<p class="small">Wiley Home</p>
  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque dolore dolorum expedita illo illum modi, molestias nam necessitatibus nemo nihil nisi odit officiis perspiciatis quae quibusdam suscipit totam, vero.</p>
  			<p class="mt-3">
  				<button type="button" class="btn btn-primary btn-sm">Event Details</button>
  			</p>
  		</div>
  		<div class="windowpane-desc p-2">
  			<p class="text-highlight text-highlight-dark h2">
  				<span class="highlight highlight--wrapping">
            Seattle
          </span>
  			</p>
  			<p class="mt-3 text-highlight text-highlight-dark">
  				<span class="highlight highlight--wrapping">
            Wiley House
          </span>
  			</p>
  			<p class="mt-3">
  				<button type="button" class="btn btn-primary btn-sm d-md-none">Details</button>
  			</p>
  		</div>
  	</div>
  	<div class="col-md-4 col-sm-6 windowpane bg-cream">
  		<div class="windowpane-desc full-panel p-4">
  			<h3>A Text Header</h3>
  			<p>Short text works best here. Text can be cutoff on mobile and some desktop displays, so keep copy concise.</p>
  			<p>If you have more to say, you may want to try an overlay.</p>
  		</div>
  	</div>
  </div>