SCU

Design System

2.4.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 d-flex align-items-center justify-content-between flex-nowrap">
    			<h5>Nature is so fantastic, enjoy it. Let it make you happy. If you hypnotize it, it will go away. Let's have a happy little tree in here. If we're going to have animals around we all have to be concerned about them and take care of them. There we go.</h5>
    			<i class="h5 chevron right ml-3"></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 d-flex align-items-center justify-content-between flex-nowrap">
    			<h5>MATH 12: Calculus & Analytic Geometry II</h5>
    			<i class="h5 chevron right ml-3"></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 d-flex align-items-center justify-content-between flex-nowrap">
    			<h5>Post-Immersion</h5>
    			<i class="h5 chevron right ml-3"></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>

Alert

Alert icon First Option: Use for emergency notifications (ie. COVID-19 FAQs).

Alert icon Second Option: Used for informational purposes.

Alert icon Third Option: Used as a warning or reminder alert.

<div class="container" style="padding:0;">
    <p class="border border-exclamation-triangle mt-3 mb-0 py-3 px-4 text-center" style="background-color: #fff;">
      <i class="fas fa-exclamation-triangle text-exclamation-triangle text-center mt-1 mr-1"><span class="sr-only">Alert icon</span></i>
      <span class="text-bold text-exclamation-triangle" style="font-weight:800">First Option:</span>
      Use for emergency notifications (ie.&nbsp;<a href="/preparedscu/faqs/">COVID-19 FAQs</a>).</p>
    <p></p>
  </div>
  
  <div class="container" style="padding:0;">
    <p class="border border-info-circle mt-3 mb-0 py-3 px-4 text-center" style="background-color: #fff;">
      <i class="fas fa-info-circle text-info-circle text-center mt-1 mr-1"><span class="sr-only">Alert icon</span></i>
      <span class="text-bold text-info-circle" style="font-weight:800">Second Option:</span>
      Used for informational purposes.</p>
    <p></p>
  </div>
  
  <div class="container" style="padding:0;">
    <p class="border border-flag mt-3 mb-0 py-3 px-4 text-center" style="background-color: #fff;">
      <i class="fas fa-flag text-flag text-center mt-1 mr-1"><span class="sr-only">Alert icon</span></i>
      <span class="text-bold text-flag" style="font-weight:800">Third Option:</span>
      Used as a warning or reminder alert.</p>
    <p></p>
  </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>

Button

SCU Buttons
.maroon .link-button.brand-primary .link-button.white .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>

By The Numbers

Heading
Body
Stat1
Stat 1 Description*
 
Stat2
Stat 2 Description
 
Stat3
Stat 3 Description
 
Stat4
Stat 4 Description
 

Internal or External Button Link

<div class="large-stats block bg-light-stat light-stat-text has-dim-0 text-center mb-0" style="border-radius:0;">
    <div class="container">
      <div class="h1 block-title light-stat-text" style="padding-bottom: 15px;">Heading</div>
      <div class="row justify-content-center">
        <div class="col-md-10 text-center light-stat-text" style="padding-bottom:30px;">Body</div>
      </div>
      <div class="row justify-content-center">
        <div class="col-10 col-md-6 col-lg-3 light-stat">
          <div class="text-center light-stat large-stats-numbers" style="font-weight: 400; border: none;"><strong>Stat1</strong></div>
          <div class="text-center light-stat-text">Stat 1 Description*</div>
          <div class="text-center">&nbsp;</div>
        </div>
        <div class="col-10 col-md-6 col-lg-3 light-stat">
          <div class="text-center light-stat large-stats-numbers" style="font-weight: 400;"><strong>Stat2</strong></div>
          <div class="text-center light-stat-text">Stat 2 Description</div>
          <div class="text-center">&nbsp;</div>
        </div>
        <div class="col-10 col-md-6 col-lg-3 light-stat">
          <div class="text-center light-stat large-stats-numbers" style="font-weight: 400;"><strong>Stat3</strong></div>
          <div class="text-center light-stat-text">Stat 3 Description</div>
          <div class="text-center">&nbsp;</div>
        </div>
        <div class="col-10 col-md-6 col-lg-3 light-stat">
          <div class="text-center light-stat large-stats-numbers" style="font-weight: 400;"><strong>Stat4</strong></div>
          <div class="text-center light-stat-text">Stat 4 Description</div>
          <div class="text-center">&nbsp;</div>
        </div>
      </div>
      <div class="text-center" style="padding-top:15px;">
        <p><a class="btn btn-primary px-5 d-sm-inline-block" href="#">Internal or External Button Link</a></p>
        <p></p>
      </div>
    </div>
  </div>

Call To Action

<nav aria-label="Call to Action">
  
    <div class="d-flex jumbotron light-cta block text-white has-dim-0 text-center mb-0">
      <div class="container ml-auto my-auto text-center">
        <div class="h1 block-title action"><span class="display-4 text-light-cta-title">Heading*</span></div>
        <div class="row justify-content-center">
          <div class="col-10 text-light-cta">Body</div>
        </div>
        <div class="row justify-content-center pt-5">
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-primary" href="#">Button 1 Link Text</a></p>
          </div>
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-primary" href="#">Button 2 Link Text</a></p>
          </div>
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-primary" href="#">Button 3 Link Text</a></p>
          </div>
        </div>
      </div>
    </div>
    <br><br>
  
    <div class="d-flex jumbotron dark-cta block text-white has-dim-0 text-center mb-0">
      <div class="container ml-auto my-auto text-center">
        <div class="h1 block-title action"><span class="display-4 text-dark-cta-title">Invent the Life You Want to Lead</span></div>
        <div class="row justify-content-center">
          <div class="col-10 text-dark-cta"></div>
        </div>
        <div class="row justify-content-center pt-5">
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-dark-cta" href="https://www.scu.edu/admission/visits-events/virtualscu/">Visit Virtually</a></p>
          </div>
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-dark-cta" href="https://www.scu.edu/admission/">Apply Now</a></p>
          </div>
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-dark-cta" href="https://www.scu.edu/admission/rfi/">Join Our Mailing List</a></p>
          </div>
        </div>
      </div>
    </div>
  
    <br><br>
  
    <div class="d-flex jumbotron block text-white has-dim-4 text-center mb-0" style="background-image:url(https://www.scu.edu/media/institutional-pages/admission/images/marketing001-1000x667.jpg);border-radius:0; background-repeat: no-repeat;background-position: center;min-height: 490px; background-color: #546575;">
      <div class="container ml-auto my-auto text-center">
        <div class="h1 block-title action"><span class="display-4 text-photo-title">It's Good to be a Bronco</span></div>
        <div class="row justify-content-center">
          <div class="col-10 text-photo">Being in the heart of Silicon Valley means you’re down the street from some of the most innovative and successful businesses in the world. An SCU education is an investment that will pay off throughout the course of your life, both financially and personally. </div>
        </div>
        <div class="row justify-content-center pt-5">
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-primary" href="/admission/choosing-scu/">Why Choose SCU</a></p>
          </div>
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-primary" href="/admission/visits-events/">Visits and Tours</a></p>
          </div>
          <div class="col-md-4">
            <p class="text-center"><a style="font-size: 1.563rem;" class="w-100 py-3 text-weight-lighter   btn btn-primary" href="/admission/financial-aid/">Financial Aid</a></p>
          </div>
        </div>
      </div>
    </div>
  </nav>

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

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

Add a .h-100 to the parent div to get matching heights.

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-3 bg-light border h-100">
  				<h4 class="text-primary"><a href="#">Program Title</a></h4>
  				<p>Add a .h-100 to the parent div to get matching heights.</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 class="col-12 col-md-4 mt-3 mt-md-0">
  			<div class="comparison p-3 bg-light border h-100">
  
  				<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 class="col-12 col-md-4 mt-3 mt-md-0">
  			<div class="comparison p-3 bg-light border">
  				<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>

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>

Header New

Header

The standard site-wide header.

Current Students Faculty Families Visitors | Login Search 
<header class="header-scu bg-primary">
    	<div class="nav-top fixed-top">
    		<div class="container d-flex align-items-center">
    			<div class="ml-auto">
    				<span class="d-none d-sm-inline text-white">
    					<a href="#" class="pl-0 pr-2 text-white">Current Students</a>
    					<a href="#" class="px-2 text-white">Faculty</a>
    					<a href="#" class="px-2 text-white">Families</a>
    					<a href="#" class="pl-2 pr-3 text-white">Visitors</a>
    					|
    				</span>
    
    				<a href="/login" class="text-white pl-3 pr-2">Login</a>
    				<a href="#" class="text-white px-2">
    					<i class="fa fa-search"></i>
    					<span class="sr-only">Search</span>
    				</a>
    			</div>
    		</div>
    	</div>
    	<!-- Note: the nav class requires .nav-fixed and .fixed-top, which have been removed for the content types. -->
    	<nav class="initial navbar navbar-dark navbar-expand-lg bg-primary">
    		<div class="container px-0 px-sm-3">
    			<a class="navbar-brand text-white wordmark" href="#">Santa Clara University</a>
    			<button class="navbar-toggler" type="button" data-target="#navbarCollapse" data-toggle="collapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    				<span class="navbar-toggler-icon"></span>
    			</button>
    			<div class="collapse navbar-collapse" id="navbarCollapse">
    				<ul class="navbar-nav ml-auto">
    					<li class="nav-item">
    						<a class="nav-link" href="#">About SCU</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Academics</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Admission</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Campus Life</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Giving</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">News &amp; Events</a>
    					</li>
    					<div class="d-sm-none w-100" id="navbarCollapseAudiences">
    						<hr class="m-1" />
    						<a href="#" class="nav-link nav-item">Current Students</a>
    						<a href="#" class="nav-link nav-item">Faculty</a>
    						<a href="#" class="nav-link nav-item">Families</a>
    						<a href="#" class="nav-link nav-item">Visitors</a>
    					</div>
    				</ul>
    			</div>
    		</div>
    	</nav>
    </header>

Header Custom

Header with a light color scheme.

Santa Clara University
Login Search 
<header class="header-scu">
    	<div class="nav-top nav-top-custom fixed-top bg-white">
    		<div class="container d-flex py-2 align-items-center">
    			<span class="mr-auto text-uppercase wordmark link-home">
    				<a href="/" class="text-primary">Santa Clara University</a>
    			</span>
    			<div class="ml-auto">
    				<a href="/login" class="px-2">Login</a>
    				<a href="/search" class="px-2">
    					<i class="fa fa-search"></i>
    					<span class="sr-only">Search</span>
    				</a>
    			</div>
    		</div>
    	</div>
    	<!-- Note: the nav class requires .nav-fixed and .fixed-top, which have been removed for the content types. -->
    	<nav class="nav-fixed-custom initial navbar navbar-light navbar-expand-xl bg-light">
    		<div class="container px-0 px-sm-3">
    			<a class="navbar-brand text-sans-light wordmark" href="#">
    				School of Engineering
    			</a>
    			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    				<span class="navbar-toggler-icon"></span>
    			</button>
    			<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    				<ul class="navbar-nav ml-auto">
    					<li class="nav-item">
    						<a class="nav-link" href="#">About</a>
    					</li>
    					<li class="nav-item dropdown">
    						<a class="nav-link dropdown-toggle" href="homepage.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    							Academics
    						</a>
    						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
    							<a class="dropdown-item" href="#">Action</a>
    							<a class="dropdown-item" href="#">Another action</a>
    							<div class="dropdown-divider"></div>
    							<a class="dropdown-item" href="#">Something else here</a>
    						</div>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Admission</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Current Students</a>
    					</li>
    					<li class="nav-item dropdown">
    						<a class="nav-link dropdown-toggle" href="homepage.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    							Business Offices
    						</a>
    						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
    							<a class="dropdown-item" href="#">Action</a>
    							<a class="dropdown-item" href="#">Another action</a>
    							<div class="dropdown-divider"></div>
    							<a class="dropdown-item" href="#">Something else here</a>
    						</div>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">News and Events</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Giving</a>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</nav>
    </header>

Header Image

Image headers might need more padding. Use padding utility classes on their container to give them more space.

Santa Clara University
Login Search 
<header class="header-scu bg-primary">
    	<div class="nav-top nav-top-custom fixed-top bg-white">
    		<div class="container d-flex py-2 align-items-center">
    			<span class="mr-auto text-uppercase wordmark link-home">
    				<a href="/" class="text-primary">Santa Clara University</a>
    			</span>
    			<div class="ml-auto">
    				<a href="/login" class="px-2">Login</a>
    				<a href="/search" class="px-2">
    					<i class="fa fa-search"></i>
    					<span class="sr-only">Search</span>
    				</a>
    			</div>
    		</div>
    	</div>
    	<!-- Note: the nav class requires .nav-fixed and .fixed-top, which have been removed for the content types. -->
    	<nav class="nav-fixed-custom initial navbar navbar-light navbar-expand-xl bg-light">
    		<div class="container px-0 px-sm-3 py-3">
    			<a class="navbar-brand text-sans-light wordmark" href="#">
    				<img src="https://www.scu.edu/media/scuedu/header/images/cc_logo_v2.png" alt="Career Center Logo">
    			</a>
    			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup2" aria-controls="navbarNavAltMarkup2" aria-expanded="false" aria-label="Toggle navigation">
    				<span class="navbar-toggler-icon"></span>
    			</button>
    			<div class="collapse navbar-collapse" id="navbarNavAltMarkup2">
    				<ul class="navbar-nav ml-auto">
    					<li class="nav-item active">
    						<a class="nav-link" href="#">Handshake Login<span class="sr-only">(current)</span></a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Make An Appointment</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Job Prep Toolkit</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Employers</a>
    					</li>
    					<li class="nav-item dropdown">
    						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    							Dropdown link
    						</a>
    						<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    							<a class="dropdown-item" href="#">Action</a>
    							<a class="dropdown-item" href="#">Another action</a>
    							<a class="dropdown-item" href="#">Something else here</a>
    						</div>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</nav>
    </header>

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

Block

Jumbotron Blocks replace pre-2.2 Block content types, which added extra padding to the div container.

This is a jumbotron block.

It's different than a hero. The height adjusts based on the content within it.

<div class="jumbotron block text-center">
    	<h1>This is a jumbotron block.</h1>
    	<p class="lead">It's different than a hero. The height adjusts based on the content within it.</p>
    	<button class="btn btn-primary mt">With a Simple Button</button>
    </div>

Hero

Hero jumbotrons have a slightly different design, and incorporate h1 text and a caption. They also have their own special rules for height/aspect ratio.

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

Landing Page

<div class="jumbotron jumbotron-fluid hero has-dim-2 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>

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.

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 

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

Video

There are special usage notes and restrictions for using videos in jumbotrons. Videos used in this context must be purely decorative. They cannot have audio or appear to have people speaking. The ideal length is 10-16 seconds long (at 720p). Avoid fast moving images, flashing lights, or fast-cut editing.

This Could Be Your View

Invent the life you want to lead at Santa Clara University.

Get Started 
<div class="d-flex jumbotron jumbotron-fluid jumbotron-video" style="min-height: 37.5rem;">
    	<video autoplay loop muted playsinline poster="https://res.cloudinary.com/scu/video/upload/vc_auto/v1547678993/campaign-site-assets/Campaign_Anthem_video_v3.0_001.jpg">
    		<source src="https://res.cloudinary.com/scu/video/upload/vc_auto/v1547678993/campaign-site-assets/Campaign_Anthem_video_v3.0_001.mp4" type="video/mp4">
    		<source src="https://res.cloudinary.com/scu/video/upload/vc_auto/v1547678993/campaign-site-assets/Campaign_Anthem_video_v3.0_001.webm" type="video/webm">
    	</video>
    	<div class="col-12 col-md-8 container ml-auto my-auto text-center text-white">
    		<h1 class="display-4"> This Could Be Your View</h1>
    		<p class="lead">Invent the life you want to lead at Santa Clara University.</p>
    		<a class="btn px-3 py-1 btn-outline-beige" href="#" role="button">Get Started</a>
    	</div>
    </div>

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 Compact

Person spotlight portrait image

Career Center

Elspeth Rosetti

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.

<div class="media d-flex">
    	<div>
    		<img class="border border-light mr-3 rounded-circle" src="holder.js/128x128" alt="Person spotlight portrait image" />
    	</div>
    	<div class="media-body">
    		<p class="small mb-0 text-muted text-uppercase">Career Center</p>
    		<p class="h4 text-primary"><a href="#">Elspeth Rosetti</a></h4>
    			<p class="mb-0">Cras sit amet nibh libero, <a href="#">in gravida nulla.</a> 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>
    	</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 align-items-center px-3 px-md-4 px-xl-5 py-4">
    	<div class="col-12 col-md-8">
    		<blockquote class="text-sans-light text-white m-0">
    			<p class="m-0 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>
    		</blockquote>
    		<footer class="text-right mt-3">
    			<cite title="Source Title">Speaker Name</cite>, (their title)
    			<p class="m-0">Relevant University Department</p>
    		</footer>
    	</div>
    	<div class="col-12 col-md-4">
    		<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. 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

<div class="row pull-quote-inv align-items-center px-3 px-md-4 px-xl-5 py-4">
    	<div class="col-12 col-md-4">
    		<img src="holder.js/300x300?auto=yes" alt="Placeholder" class="d-block mx-auto rounded-circle img-fluid" />
    	</div>
    	<div class="col-12 col-md-8">
    		<blockquote class="text-sans-light m-0">
    			<p class="m-0 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>
    		</blockquote>
    		<footer class="text-right mt-3">
    			<cite title="Source Title">Speaker Name</cite>, (their title)
    			<p class="m-0">Relevant University Department</p>
    		</footer>
    	</div>
    </div>

Pull Quote Text

A pull quote with a twist - no portrait image. Great for quotes where a headshot either doesn't exist, or simply isn't needed for the design.

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

<div class="row pull-quote-inv align-items-center px-3 px-md-4 px-xl-5 py-4">
    	<div class="col-12">
    		<blockquote class="text-sans-light m-0">
    			<p class="m-0 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>
    		</blockquote>
    		<footer class="text-right mt-3">
    			<cite title="Source Title">Speaker Name</cite>, (their title)
    			<p class="m-0">Relevant University Department</p>
    		</footer>
    	</div>
    </div>

Site Pointer

The Learning Commons and Library Library Room Reservations
The Learning Commons and Library 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?
The Learning Commons and Library Lorem Ipsum Dolor 
<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="fab 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>

Windowpane

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

Beyond Innovation

Roadshow

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>