SCU

Design System

2.1.1


Content Types

Accordion

Accordion

2.0+ Accordion style.

Students may transfer up to 9-quarter units of graduate-level (post-baccalaureate) coursework from other accredited institutions. Courses to be considered for transfer must have been completed within five years of the initial enrollment date in the School of Education and Counseling Psychology. Transferred credits only apply to the specific course for which the exemption is sought. For more information and for the process for consideration, please refer to the current Graduate Bulletin & Handbook.

Further applications of differentiation. Integration and the fundamental theorem of calculus. Methods and applications of integration. Only one of MATH 12, 31 or 36 may be taken for credit. Note: MATH 30 and 35 are not suitable prerequisites for MATH 12 without additional preparation. Prerequisite: MATH 11 or equivalent. A grade of C- or higher in MATH 11 is strongly recommended before taking MATH 12.

While the immersion has ended, the full experience is a journey that is never truly over. More than an end goal, we believe that the immersion itself is a starting point for ongoing reflective and critical engagement of the realities of our local and global community. For this reason, participants commit to meeting at least 3 times upon return from the trip to continue processing, sharing stories, and determining next steps toward integrating the immersion experience into life at Santa Clara and beyond. Immersion companions, Ignatian staff members, and other members of the Santa Clara community are here as a resource to assist as you integrate your immersion into post-immersion life.

<div class="accordion mt-3" id="accordion-1" data-children=".accordion-item">
    	<div class="accordion-item">
    		<a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-1" aria-expanded="false" aria-controls="accordion-1" class="collapsed py-3">
    			<h5>Can I Transfer Credits?</h5>
    			<i class="h5 chevron right"></i>
    		</a>
    		<div id="accordion-panel-1" class="collapse" role="tabpanel" style="">
    			<p>
    				Students may transfer up to 9-quarter units of graduate-level (post-baccalaureate) coursework from other accredited institutions. Courses to be considered for transfer must have been completed within five years of the initial enrollment date in the School
    				of Education and Counseling Psychology. Transferred credits only apply to the specific course for which the exemption is sought. For more information and for the process for consideration, please refer to the current Graduate Bulletin & Handbook.
    			</p>
    		</div>
    	</div>
    	<div class="accordion-item">
    		<a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-2" aria-expanded="false" aria-controls="accordion-1" class="collapsed py-3">
    			<h5>MATH 12: Calculus & Analytic Geometry II</h5>
    			<i class="h5 chevron right"></i>
    		</a>
    		<div id="accordion-panel-2" class="collapse" role="tabpanel" style="">
    			<p>
    				Further applications of differentiation. Integration and the fundamental theorem of calculus. Methods and applications of integration. Only one of MATH 12, 31 or 36 may be taken for credit. Note: MATH 30 and 35 are not suitable prerequisites for MATH
    				12 without additional preparation. Prerequisite: MATH 11 or equivalent. A grade of C- or higher in MATH 11 is strongly recommended before taking MATH 12.
    			</p>
    		</div>
    	</div>
    	<div class="accordion-item">
    		<a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-3" aria-expanded="false" aria-controls="accordion-1" class="collapsed py-3">
    			<h5>Post-Immersion</h5>
    			<i class="h5 chevron right"></i>
    		</a>
    		<div id="accordion-panel-3" class="collapse" role="tabpanel" style="">
    			<p>
    				While the immersion has ended, the full experience is a journey that is never truly over. More than an end goal, we believe that the immersion itself is a starting point for ongoing reflective and critical engagement of the realities of our local and
    				global community. For this reason, participants commit to meeting at least 3 times upon return from the trip to continue processing, sharing stories, and determining next steps toward integrating the immersion experience into life at Santa Clara and
    				beyond. Immersion companions, Ignatian staff members, and other members of the Santa Clara community are here as a resource to assist as you integrate your immersion into post-immersion life.
    			</p>
    		</div>
    	</div>
    </div>

Accordion Cards

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.

  • 3:00 PM
    1 Apr 2018

    First Event


    Image description

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum delectus dolore explicabo facere fuga laborum magnam magni minus nisi nulla pariatur perferendis quisquam, ratione rerum, temporibus ullam, unde ut voluptas.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • 4:00 PM
    1 Apr 2018
    A generic square placeholder image with rounded corners in a figure.
    A caption for the above image.
  • 5:00 PM
    1 Apr 2018

    Closing


    Image description

    Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea cress potato sprouts wattle seed rutabaga okra yarrow cress avocado grape.

    Cabbage lentil cucumber chickpea sorrel gram garbanzo plantain lotus root bok choy squash cress potato.

<div class="container">
  	<ul class="row list-unstyled">
  		<li class="col-md-12">
  			<div class="row">
  				<div class="col-md-3 pr-md-5 text-md-right">
  					<h5 class="mb-1 text-sans-light">3:00 PM</h5>
  					<h6 class="text-sans-light">1 Apr 2018</h6>
  				</div>
  				<div class="agenda-content col-md-9 pl-md-5 pb-5 border-left border-light">
  					<div class="agenda-dot d-none d-md-block">
  						<i class="d-block bg-white rounded-circle"></i>
  					</div>
  					<article class="mt-4 mt-md-2 p-4">
  						<div class="agenda-arrow">
  							<div></div>
  						</div>
  						<header>
  							<h4 class="text-sans-light">First Event</h4>
  						</header>
  						<hr class="py-1" />
  						<div class="row">
  							<div class="col-md-4">
  								<img class="img-fluid w-100" src="holder.js/100px270" alt="Image description">
  							</div>
  							<div class="col-md-8 mt-3 mt-md-0">
  								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum delectus dolore explicabo facere fuga laborum magnam magni minus nisi nulla pariatur perferendis quisquam, ratione rerum, temporibus ullam, unde ut voluptas.</p>
  								<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  							</div>
  						</div>
  					</article>
  				</div>
  			</div>
  		</li>
  		<li class="col-md-12">
  			<div class="row">
  				<div class="col-md-3 pr-md-5 text-md-right">
  					<h5 class="mb-1 text-sans-light">4:00 PM</h5>
  					<h6 class="text-sans-light">1 Apr 2018</h6>
  				</div>
  				<div class="agenda-content col-md-9 pl-md-5 pb-5 border-left border-light">
  					<div class="agenda-dot d-none d-md-block">
  						<i class="d-block bg-white rounded-circle"></i>
  					</div>
  					<article class="mt-4 mt-md-2 p-4">
  						<div class="agenda-arrow">
  							<div></div>
  						</div>
  						<div class="row">
  							<div class="col-md-12">
  								<figure class="mb-0">
  									<img src="holder.js/100px270" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  									<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
  								</figure>
  							</div>
  						</div>
  					</article>
  				</div>
  			</div>
  		</li>
  		<li class="col-md-12">
  			<div class="row">
  				<div class="col-md-3 pr-md-5 text-md-right">
  					<h5 class="mb-1 text-sans-light">5:00 PM</h5>
  					<h6 class="text-sans-light">1 Apr 2018</h6>
  				</div>
  				<div class="agenda-content col-md-9 pl-md-5 pb-5">
  					<div class="agenda-dot d-none d-md-block">
  						<i class="d-block bg-white rounded-circle"></i>
  					</div>
  					<article class="mt-4 mt-md-2 p-4">
  						<div class="agenda-arrow">
  							<div></div>
  						</div>
  						<header>
  							<h4 class="text-sans-light">Closing</h4>
  						</header>
  						<hr class="py-1" />
  						<div class="row">
  							<div class="col-md-4">
  								<img class="img-fluid w-100" src="holder.js/100px270" alt="Image description">
  							</div>
  							<div class="col-md-8 mt-3 mt-md-0">
  								<p>Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea cress potato sprouts wattle seed rutabaga okra yarrow cress avocado grape.</p>
  								<p class="mb-0">Cabbage lentil cucumber chickpea sorrel gram garbanzo plantain lotus root bok choy squash cress potato.</p>
  							</div>
  						</div>
  					</article>
  				</div>
  			</div>
  		</li>
  	</ul>
  </div>

Announcement

Announcement

This is an announcement

Emergency Announcement

This is an emergency announcement

Flexible Options

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iste omnis repellendus sint voluptatibus. Assumenda aut, commodi cupiditate dolores doloribus illo iure, maiores mollitia officiis quod tempore velit vitae voluptatum.

Neutral Colors, Too

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iste omnis repellendus sint voluptatibus. Assumenda aut, commodi cupiditate dolores doloribus illo iure, maiores mollitia officiis quod tempore velit vitae voluptatum.

<div class="announcement 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 class="text-uppercase">Flexible Options</h3>
  	<div class="p-3">
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iste omnis repellendus sint voluptatibus. Assumenda aut, commodi cupiditate dolores doloribus illo iure, maiores mollitia officiis quod tempore velit vitae voluptatum.</p>
  	</div>
  </div>
  
  <div class="announcement announcement-dark mb-3">
  	<h3 class="text-uppercase">Neutral Colors, Too</h3>
  	<div class="p-3">
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iste omnis repellendus sint voluptatibus. Assumenda aut, commodi cupiditate dolores doloribus illo iure, maiores mollitia officiis quod tempore velit vitae voluptatum.</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
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>
  
  <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>

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>

Comparison Table

Comparison tables are great for program offerings, payment options, and other items that benefit from adjacent comparison.

Program Title

One-line description of this program.

Optional More Information

Teacher Education

One-line description of this program.

  • Degrees

    Teaching (MA)
  • Credentials

    Teaching Credential
  • 1.5 and 2 year programs
  • Options for Catholic Educators
  • Program Information
  • Apply Now

More Information

Educational Leadership

One-line description of this program.

  • Degrees

    Educational Leadership (MA)
  • Credentials

    Preliminary Administrative Services Credential, Clear Administrative Services Credential
  • 2 year program
  • Program Information
  • Apply Now
<div class="comparison-table">
  	<div class="row">
  		<div class="col-12 col-md-4">
  			<div class="comparison p-4">
  				<div class="comparison-body">
  					<h4 class="text-primary"><a href="#">Program Title</a></h4>
  					<p>One-line description of this program.</p>
  					<ul class="list-group text-sans-light my-3">
  						<li class="list-group-item">
  							<p class="small text-muted text-uppercase mb-0">List Item Title</p>
  							Counseling (MA), Counseling Psychology (MA)
  						</li>
  						<li class="list-group-item">List item</li>
  						<li class="list-group-item">List item</li>
  						<li class="list-group-item m-t">
  							<a href="#">List Link</a>
  						</li>
  						<li class="list-group-item bg-primary"><a href="#" class="text-white">Call to Action</a></li>
  					</ul>
  					<p class="mb-0 text-sans-light">
  						<a href="#" class="small text-dark">Optional More Information</a>
  					</p>
  				</div>
  			</div>
  		</div>
  		<div class="col-12 col-md-4 mt-3 mt-md-0">
  			<div class="comparison p-4">
  				<div class="comparison-body">
  					<h4 class="text-primary">Teacher Education</h4>
  					<p>One-line description of this program.</p>
  					<ul class="list-group text-sans-light my-3">
  						<li class="list-group-item">
  							<p class="small text-muted text-uppercase mb-0">Degrees</p>
  							Teaching (MA)
  						</li>
  						<li class="list-group-item">
  							<p class="small text-muted text-uppercase mb-0">Credentials</p>
  							Teaching Credential
  						</li>
  						<li class="list-group-item">1.5 and 2 year programs</li>
  						<li class="list-group-item">Options for Catholic Educators</li>
  						<li class="list-group-item"><a href="#">Program Information</a></li>
  						<li class="list-group-item bg-primary text-white">Apply Now</li>
  					</ul>
  					<p class="mb-0 text-sans-light">
  						<a href="#" class="small text-dark">More Information</a>
  					</p>
  				</div>
  			</div>
  		</div>
  		<div class="col-12 col-md-4 mt-3 mt-md-0">
  			<div class="comparison p-4">
  				<div class="comparison-body">
  					<h4 class="text-primary">Educational Leadership</h4>
  					<p>One-line description of this program.</p>
  					<ul class="list-group text-sans-light my-3">
  						<li class="list-group-item">
  							<p class="small text-muted text-uppercase mb-0">Degrees</p>
  							Educational Leadership (MA)
  						</li>
  						<li class="list-group-item">
  							<p class="small text-muted text-uppercase mb-0">Credentials</p>
  							Preliminary Administrative Services Credential, Clear Administrative Services Credential
  						</li>
  						<li class="list-group-item">2 year program</li>
  						<li class="list-group-item m-t">
  							<a href="#">Program Information</a>
  						</li>
  						<li class="list-group-item bg-primary text-white">Apply Now</li>
  					</ul>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>

Department Switcher

A replacement for select boxes for long lists of information such as majors/minors or departments.

<select name="departments" id="departments" class="custom-select form-control-lg" data-placeholder="Departments and Programs">
    <option></option>
    <optgroup label="College of Arts and Sciences">
      <option value="/cas/anthropology">Anthropology</option>
      <option value="/cas/art-and-art-history">Art and Art History</option>
      <option>Biology</option>
      <option>Chemistry and Biochemistry</option>
      <option>Classics</option>
      <option>Communication</option>
      <option>English</option>
      <option>Environmental Studies</option>
      <option>Ethnic Studies</option>
      <option>History</option>
      <option>Liberal Studies</option>
      <option>Math and Computer Science</option>
      <option>Military Science</option>
      <option>Modern Languages and Literatures</option>
      <option>Music</option>
      <option>Philosophy</option>
      <option>Physics</option>
      <option>Political Science</option>
      <option>Psychology</option>
      <option>Public Health</option>
      <option>Religious Studies</option>
      <option>Sociology</option>
      <option>Theatre and Dance</option>
      <option>Women's and Gender Studies</option>
    </optgroup>
    <optgroup label="School of Engineering">
      <option>Bioengineering</option>
      <option>Civil Engineering</option>
      <option>Computer Science and Engineering</option>
      <option>Electrical Engineering</option>
      <option>Mechanical Engineering</option>
      <option>Web Design and Engineering</option>
    </optgroup>
    <optgroup label="Leavey School of Business">
      <option>Accounting</option>
      <option>Accounting & Information Systems</option>
      <option>Economics</option>
      <option>Finance</option>
      <option>Management</option>
      <option>Marketing</option>
      <option>Management Information Systems (in the department of OMIS)</option>
    </optgroup>
  </select>

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.

All of the colors.

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.

<h2 class="mt-0 text-highlight">
  	<strong class="highlight highlight--wrapping">
      Broncos. Horsepower.
    </strong>
  </h2>
  <p class="mt-4 text-highlight">
  	<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-2 text-highlight text-highlight-black">
  	<strong class="highlight highlight--wrapping">
      Broncos. Horsepower.
    </strong>
  </h2>
  <p class="mt-4 text-highlight text-highlight-black">
  	<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-2 text-highlight text-highlight-light">
  	<strong class="highlight highlight--wrapping">
      All of the colors.
    </strong>
  </h2>
  <p class="mt-4 text-highlight text-highlight-light">
  	<span class="highlight highlight--wrapping">
      Aenean lacinia bibendum nulla sed consectetur. <a href="#">Fusce dapibus, tellus ac cursus commodo,</a> 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">
  		<div class="badge badge-primary infographic p-3 mb-3 text-center text-white">
  			<p class="statcard-number display-4 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 display-4 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">
  		<div class="badge badge-navy infographic p-3 mb-2 text-center text-white">
  			<p class="statcard-number display-4 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-2 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 text-white">
  			<p class="statcard-number display-4 text-sans-light">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-4">
  		<div class="badge bg-gradient infographic p-5 m-b my-3 text-center text-white">
  			<p class="statcard-number display-1 text-serif-bold">95%</p>
  			<p class="infographic-label text-sans-light text-uppercase mt-2 mb-0">This is an <a href="#">extremely large stat</a> 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/nobili.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 pb-0 pt-4" style="background-image:url(/assets/images/examples/nobili.jpg);">
  	<div class="container position-relative">
  		<div class="caption col-9 col-md-4">
  			<p class="mb-0">
  				SCU Multicultural Center's annual Global Village Festival celebrates our diverse campus with food, activities, and performances.
  			</p>
  		</div>
  		<h1>Landing Page</h1>
  	</div>
  </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>

Lists

Here's everything you need to know about becoming a LEAD scholar.


  1. You'll need to be the first in your family to go to college.
  2. Apply to the LEAD program after being accepted to SCU.
  3. Attend LEAD Week orientation.
  4. Look for scholarships and fellowships specifically for LEAD scholars.
<div class="styled-list p-4 bg-light">
  	<h4>Here's everything you need to know about becoming a LEAD scholar.</h4>
  	<hr>
  	<ol class="pl-0">
  		<li><span class="list-text">You'll need to be the first in your family to go to college.</span></li>
  		<li><span class="list-text">Apply to the LEAD program after being accepted to SCU.</span></li>
  		<li><span class="list-text">Attend <a href="#">LEAD Week orientation.</a></span></li>
  		<li><span class="list-text">Look for scholarships and fellowships specifically for LEAD scholars.</span></li>
  	</ol>
  </div>

Person Spotlight

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!


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.

Call to Action
<div class="row no-gutters person-spotlight">
    	<div class="col-12 col-md-6 person-spotlight-img" 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 person-spotlight-title"><a href="#">Elspeth Rosetti</a></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.
    			<a href="#">Beatae impedit obcaecati optio qui sed!</a></p>
    	</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-0 text-uppercase small">Transforming Communities</p>
    		<h2 class="text-sans-bold person-spotlight-title"><a href="#">Gordon Young</a></h2>
    		<hr />
    		<p class="text-sans-light">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.
    			<a href="#">Ab, mollitia.</a></p>
    		<a href="#" class="btn btn-outline-light">Call to Action</a>
    	</div>
    	<div class="col-12 col-md-6 person-spotlight-img" style="background-image:url(/assets/images/gordon-young-2-750x270.jpg);"></div>
    </div>

Person Spotlight Inv

Person Spotlight, but with an inverted color scheme.

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!


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.

Call to Action
<div class="row no-gutters person-spotlight-inv">
    	<div class="col-12 col-md-6 person-spotlight-img" style="background-image:url(/assets/images/elspeth-rossetti-750x270.jpg)"></div>
    	<div class="col-12 col-md-6 p-4">
    		<h6 class="text-sans-light text-uppercase small mb-0">Department</h6>
    		<h2 class="text-sans-bold"><a href="#">Elspeth Rosetti</a></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.
    			<a href="#">Beatae impedit obcaecati optio qui sed!</a></p>
    	</div>
    </div>
    
    <br />
    
    <div class="row no-gutters person-spotlight-inv">
    	<div class="col-12 col-md-6 p-4">
    		<p class="text-sans-light mb-1 text-uppercase small">Transforming Communities</p>
    		<h2 class="text-sans-bold"><a href="#">Gordon Young</a></h2>
    		<hr />
    		<p class="text-sans-light">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.</p>
    		<a href="#" class="btn btn-outline-primary">Call to Action</a>
    	</div>
    	<div class="col-12 col-md-6 person-spotlight-img" style="background-image:url(/assets/images/gordon-young-2-750x270.jpg);"></div>
    </div>

Pull Quote

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
<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. Excepturi quia quidem ratione voluptas. Ab accusantium aperiam consectetur dolor dolore dolorem, facilis fuga,
    				<a href="#">mollitia possimus quam quia</a> 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>

Pull Quote Inv

An identical copy of pull quote, but with an inverted white and gray color scheme.

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-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, 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.</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" class="img-fluid">
        <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" class="img-fluid">
        <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" class="img-fluid">
        <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.

Nobili Hall

Independent Pizzeria

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.

Nobili Hall

Join us at Independent Pizzeria.

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-inverted">Beyond Innovation</a></h4>
  			<h1 class="text-serif text-inverted mt-4">Roadshow</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/nobili.jpg');">
  		<div class="windowpane-overlay p-3 text-sans-light">
  			<p class="h3 mb-0">Nobili Hall</p>
  			<p class="small">Independent Pizzeria</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">
  
  			<h2 class="mt-2 text-highlight text-highlight-black">
  				<strong class="highlight highlight--wrapping">
            Nobili Hall
          </strong>
  			</h2>
  			<p class="mt-4 text-highlight text-highlight-black">
  				<span class="highlight highlight--wrapping">
            Join us at Independent Pizzeria.
          </span>
  			</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>