CSS Docs Index:

Container Markup

Any page content will use the following base markup, unless starting with a full width hero background:

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12">
			<div class="post-content">
				
				[Content]
				
			</div>
		</div>
	</div>
</div>

Typography: Sizing

.mega

.super

.alpha

.beta

.gamma

.delta

.zeta

.theta

.eta

.mega.serif

.super.serif

.alpha.serif

.beta.serif

.gamma.serif

.delta.serif

.zeta.serif

.theta.serif

.eta.serif

Typography: Weights

.lite
.book
.med
.semi
.bo

Gotham

Light

Book

Book Italic

Medium

Medium Italic

Bold

Bold Italic

Sentinel

Book

Book Italic

Semibold

Semibold Italic

Bold

Bold

Typography: Styling and Positioning

Italics

.delta.em.serif

or
<em>Italic text</em>

Bold

.delta.bo

or
<strong>Bold Text</strong>

Small Caps

.small.text-uppercase

Alignment (bootstrap classes)

	<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>					

Text Transform (bootstrap classes)

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Spacing

Spacing classes with a scale in multiples of 12px, up to 78px (.mt6h, .mb6h, .pt6h, .pb6h, i.e. 6.5 * 12)

.padding-full adds 20px of top/right/bottom/left padding on desktop, 10px of padding on mobile
.padding-side adds 20px of right/left padding on desktop, 10px of padding on mobile
.mth {margin-top: 6px}
.pth {padding-top: 6px}
.mbh {margin-bottom: 6px}
.pbh {padding-bottom: 6px}
.mt1 {margin-top: 12px}
.mt1h {margin-top: 18px}

.pt1 {padding-top: 12px}
.pt1h {padding-top: 18px}

.mb1 {margin-bottom: 12px}
.mb1h {margin-bottom: 18px}

.pb1 {padding-bottom: 12px}
.pb1h {padding-bottom: 18px}
.mt2 {margin-top: 24px}
.mt2h {margin-top: 30px}

.pt2 {padding-top: 24px}
.pt2h {padding-top: 30px}

.mb2 {margin-bottom: 24px}
.mb2h {margin-bottom: 30px}

.pb2 {padding-bottom: 24px}
.pb2h {padding-bottom: 30px}

Content Block

Will create a block with 60px top and bottom padding on desktop, 36px on mobile.

<div class="content-block bg-plum c-white">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<h2 class="mega serif content-block-header">Board of Trustees</h2>
			</div>
		</div> <!-- row -->
	</div> <!-- container -->
</div> <!-- content-block -->

Board of Trustees

Icons

<span class="delta border-icon icon-chevron-right purple"></span>
<span class="gamma border-icon icon-chevron-right green"></span>
<span class="beta border-icon icon-chevron-left orange"></span>
<span class="alpha border-icon icon-chevron-left purpledark"></span>
<span class="delta border-icon icon-chevron-right white"></span>
<span class="small circle-icon icon-twitter"></span>
<span class="theta circle-icon icon-youtube"></span>
<span class="alpha download-icon c-green"></span>
<span class="gamma c-purple download-icon"></span>

Full List of Icon Classes

.icon-file
.icon-check
.icon-arrow-right
.icon-arrow-left
.icon-arrow-down
.icon-arrow-up
.icon-youtube
.icon-chevron-right
.icon-chevron-small-down
.icon-chevron-small-left
.icon-chevron-small-right
.icon-chevron-left
.icon-chevron-right
.icon-chevron-small-down
.icon-chevron-small-left
.icon-chevron-small-right
.icon-chevron-small-up
.icon-chevron-thin-down
.icon-chevron-thin-left
.icon-chevron-thin-right
.icon-chevron-thin-up
.icon-chevron-up
.icon-triangle-down
.icon-triangle-left
.icon-triangle-right
.icon-triangle-up
.icon-cross
.icon-minus
.icon-plus
.icon-facebook
.icon-twitter
.icon-search

Colors

Each of the following background color divs also has 24px of top and bottom of padding (.pt2.pb2)

.c-gray

.c-purple

.c-white.bg-purple.pt2.pb2

.c-green

.c-white.bg-green.pt2.pb2

.c-orange

.c-white.bg-orange.pt2.pb2

.c-purpledark

.c-white.bg-purpledark.pt2.pb2
.bg-graylite.pt2.pb2
.bg-graylite2.pt2.pb2 (this is the gray used in the RPP site)

Borders

Border classes create a 6px border by default. Add -lg to the end of any class for a 9px border.

/* Border Bottom */
.bb-purple
.bb-orange
.bb-green
.bb-purpledark

/* Border Bottom Large */
.bb-purple-lg
.bb-orange-lg
.bb-green-lg
.bb-purpledark-lg

/* Border Top */
.bt-purple
.bt-orange
.bt-green
.bt-purpledark

/* Border Top Large */
.bt-purple-lg
.bt-orange-lg
.bt-green-lg
.bt-purpledark-lg

Border Bottom

.bb-purple

.bb-orange

.bb-green

.bb-purpledark

Border Top

Examples below use the following sample markup:

<div class="text-center bt-purple-lg pb1 pt1 mb4 serif gamma semi">
	<div class="row">
		<div class="col-xs-12">
			<p>.bt-purple-lg</p>
		</div>
	</div>
</div>

.bt-purple-lg

.bt-orange-lg

.bt-green-lg

.bt-purpledark-lg

Hover Classes (icons)

.circle-icon.c-purple-hov
.circle-icon.c-orange-hov
.circle-icon.c-green-hov
.circle-icon.c-purpledark-hov
<span class="delta c-purple-hov circle-icon icon-twitter"></span>
<span class="delta c-orange-hov circle-icon icon-twitter"></span>
<span class="delta c-green-hov circle-icon icon-twitter"></span>
<span class="delta c-purpledark-hov circle-icon icon-twitter"></span>

Hover Classes (text)

.c-purple-hov
.c-orange-hov
.c-green-hov
.c-purpledark-hov

Purple Hover

Orange Hover

Green Hover

Purple Dark Hover

Buttons

By default, buttons are inline-block. This means that the width of the button will be proportional to the width of the text inside, and that the button will automatically center when placed inside a wrapper .text-center. To define the CSS display: property, you can either use:

  • .block
  • .inline-block
  • Bootsrap responsive utility classes: http://getbootstrap.com/css/#responsive-utilities
<p class="text-center mb2">
	<a class="btn bg-purple">A Purple Button</a>
</p>

A Purple Button

A Green Button

An Orange Button

A Dark Purple Button

Block buttons will fill the width of their container:

<div class="row small">
	<div class="col-xs-6 col-md-3">
		<a class="btn bg-purple block">A Purple Button</a>
	</div>
	
	<div class="col-xs-6 col-md-3">
		<a class="btn bg-green block">A Green Button</a>
	</div>

	<div class="col-xs-6 col-md-3">
		<a class="btn bg-orange block">An Orange Button</a>
	</div>
	
	<div class="col-xs-6 col-md-3">
		<a class="btn bg-purpledark block">A Purple Button</a>
	</div>
</div>

Buttons with icons:

<p class="text-center mb2">
	<a class="btn bg-purple">
		A Purple Button With A Lot of Text
		<span class="theta icon-chevron-right border-icon"></span>
	</a>
</p>

A Purple Button With A Lot of Text

<p class="text-center mb2">
	<a class="btn bg-green eta">
		A Green Button With A Lot of Text
		<span class="eta icon-chevron-right border-icon"></span>
	</a>
</p>

A Green Button With A Lot of Text

Hero

We're using an image switching script to load the appropriate image size depending on the user's browser width. The syntax is:

<div class="hero-img"
	data-interchange="
		["hero-image-sm.jpg", (default)],
		["hero-image-med.jpg", (medium)],
		["hero-image.jpg", (large)]
">

Sizing:

  • Large: 1600px
  • Medium: 1000px
  • Small: 600px

Because we can use the same background image markup for any responsive background div (not just banner hero elements), when creating a banner hero element, we need to use both the .hero-wrap and .hero-fixed-height classes on the container element like so: <div class="hero-wrap hero-fixed-height">

Full markup for the hero image below:

<div class="hero-wrap hero-fixed-height">
	<div
		class="hero-img bb-green-lg"
		data-interchange="
			["hero-image-sm.jpg", (default)],
			["hero-image-med.jpg", (medium)],
			["hero-image.jpg", (large)]
		"
	></div> <!-- hero-img -->
	
	<div class="hero-text-wrap">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12">
					<div class="hero-text">
						<div class="serif super semi">
							<span class="c-purple">Supporting Research</span><br/>
							to Improve the Lives of Young People
						</div>
					</div> <!-- hero-text -->
				</div> <!-- col -->
			</div> <!-- row -->
		</div> <!-- container -->
	</div> <!-- hero-text-wrap -->
</div> <!-- hero-wrap -->
Supporting Research
to Improve the Lives of Young People

Hero with Blockquote

The .hero-wrap.hero-fixed-height wrapper will be the same. But the .hero-text block will use the following variation:

<div class="hero-text hero-quote">
	<div class="serif semi">
		<blockquote class="c-purple">
			<p>Effective programs and policies can enhance young people's lives and social science research can help us understand, build, and improve those that work best.</p>
			
			<footer>
				<cite class="">
					<span class="text-uppercase">Jane Goodall</span>&nbsp;
					<span class="em">President</span>
				</cite>
			</footer>
		</blockquote>
	</div>
</div> <!-- hero-text -->

Effective programs and policies can enhance young people's lives and social science research can help us understand, build, and improve those that work best.

Jane Goodall  President

Featured Blocks

For the example on the home page, we can use the same hero image markup for the wrapper.

<div class="hero-wrap">
	<div
		class="hero-img"
		data-interchange="
			['/assets/images/hero-image-sm.jpg', (default)],
			['/assets/images/hero-image-med.jpg', (medium)],
			['/assets/images/hero-image.jpg', (large)]
		"
	>
		<div class="container-fluid hero-text-wrap pb2 pt4">
			<div class="row center-cols">
				<div class="col-xs-6">
					<div class="feat-block-wrap img-left">
						<div class="feat-block-inner">
							<div class="feat-block-img-wrap">
								<img class="feat-block-img" src="/assets/images/neighborhood.jpg" />
							</div>
							
							<div class="feat-block-text-wrap">
								<h2 class="delta serif mb2 bo">Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice</h2>
								
								<div class="feat-block-text small">
									<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
								</div>
							</div> <!-- feat-block-text-wrap -->
						</div> <!-- feat-block-inner -->
						
						<a class="feat-block-more c-purple">
							Read More <span class="theta border-icon icon-chevron-right purple"></span>
						</a>
					</div> <!-- feat-block-wrap -->

					<div class="feat-block-wrap img-left">
						<div class="feat-block-inner">
							<div class="feat-block-img-wrap">
								<img class="feat-block-img" src="/assets/images/neighborhood.jpg" />
							</div>
														
							<div class="feat-block-text-wrap">
								<h2 class="delta serif mb2 bo">Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice</h2>
								
								<div class="feat-block-text small">
									<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
								</div>
							</div> <!-- feat-block-text-wrap -->
						</div> <!-- feat-block-inner -->
						
						<a class="feat-block-more c-purple">
							Read More <span class="theta border-icon icon-chevron-right purple"></span>
						</a>
					</div> <!-- feat-block-wrap -->
				</div> <!-- col -->
				
				<div class="col-xs-6 col-md-4">
				
					<div class="feat-block-wrap featured">
						<div class="feat-block-inner">
							<div class="feat-block-img-wrap">
								<img class="feat-block-img" src="/assets/images/neighborhood.jpg" />
							</div>
														
							<div class="feat-block-text-wrap">
								<div class="c-purple small semi text-uppercase mb1">Featured Resource</div>

								<h2 class="gamma serif mb2 bo">Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice</h2>
								
								<div class="feat-block-text eta">
									<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
								</div>
							</div> <!-- feat-block-text-wrap -->
						</div> <!-- feat-block-inner -->
						
						<a class="feat-block-more c-purple iota">
							Read More <span class="zeta border-icon icon-chevron-right purple"></span>
						</a>
					</div> <!-- feat-block-wrap -->
								
				</div>
			</div>
		</div>

	</div>
	

</div> <!-- hero-wrap -->

Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice

Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.

Read More

Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice

Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.

Read More

Internal page examples:

<div class="row">
	<div class="col-sm-6">

		<div class="feat-block-wrap bg-graylite">
			<div class="feat-block-inner">
				
				<div class="feat-block-text-wrap">
					<h2 class="beta serif mb3 bo bb-purple pb2">
						Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice
					</h2>
					
					<div class="feat-block-text eta">
						<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
					</div>
				</div> <!-- feat-block-text-wrap -->
				
			</div> <!-- feat-block-inner -->
			
			<a class="feat-block-more c-purple">
				Read More <span class="theta border-icon icon-chevron-right purple"></span>
			</a>
		</div> <!-- feat-block-wrap -->	
			
	</div>

	<div class="col-sm-6">
	
		<div class="feat-block-wrap bg-graylite">
			<div class="feat-block-inner">
				
				<div class="feat-block-text-wrap">
					<h2 class="beta serif mb3 bo bb-green pb2">
						Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice
					</h2>
					
					<div class="feat-block-text eta">
						<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
					</div>
				</div> <!-- feat-block-text-wrap -->
				
			</div> <!-- feat-block-inner -->
			
			<a class="feat-block-more c-purple">
				Read More <span class="theta border-icon icon-chevron-right purple"></span>
			</a>
		</div> <!-- feat-block-wrap -->		
				
	</div>
</div>

Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice

Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.

Read More

Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice

Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.

Read More

Hover Blocks

<div class="col-xs-6 col-lg-3">
	<div class="hover-block" style="background-image: url(/assets/images/home-sq.jpg)">
		<div class="hover-block-text bg-orange">
			<a class="hover-block-link c-white" href="">
				<h4 class="serif delta bo group">
					<span class="hover-block-title">Our Focus Areas</span>
					<span class="icon-chevron-right border-icon fr"></span>
				</h4>
				
				<p class="eta">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</a>
		</div>
	</div>	
</div>

Gallery Slider

<div
	class="gallery js-flickity"
	data-flickity-options='{
		"wrapAround": true,
		"pageDots" : false
	}'
>
	<div class="gallery-cell">

		<div class="round-img" style="background-image: url(/assets/images/home-sq.jpg)"></div>
		
		<h3 class="delta serif semi mb0">College Graduation is the Bottom Line</h3>
		<div class="serif em c-purple mb2">Ruth Glenn</div>
		
		<div class="small">
			<p>Ruth Genn of the Bottom Line, a William T. Grant Foundation Youth Services Improvement Grant recipient, discusses the importance of college counseling for young people.</p>	

			<a class="c-purple caps read-more">Read More <span class="theta border-icon icon-chevron-right purple"></span></a>
	
		</div>
	</div>
</div>

Lists

Numbered List

<ol class="big-numbered-list">
	<li>
		<h3 class="big-numbered-list-header">This uses the .big-numbered-list class</h3>
		
		<div class="list-inner">
			
			<p class="mb1h">Applicant Guidance:</p>
			
			<p>
				<a class="caps eta med c-purple">
					<span class="beta download-icon caps"></span>
					Research Application Guide
				</a>
			</p>

			<p class="mb1h">Applicant Guidance:</p>
			
			<p>
				<a class="caps eta med c-purple">
					<span class="beta download-icon caps"></span>
					Research Application Guide
				</a>
			</p>
		</div>
	</li>

	<li>
		<h3 class="big-numbered-list-header">This uses the .check-list class inside</h3>
		
		<div class="list-inner">
			
			<ul class="check-list icon-list">
				<li>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</li>
				
				<li>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</li>
				
				<li>Funds primarily support research activities, not intervention or service costs.</li>
			</ul>

			<ul class="chevron-list icon-list">
				<li>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</li>
				
				<li>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</li>
				
				<li>Funds primarily support research activities, not intervention or service costs.</li>
			</ul>

			<ul class="download-list icon-list">
				<li><a>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</a></li>
				
				<li><a>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</a></li>
				
				<li><a>Funds primarily support research activities, not intervention or service costs.</a></li>
			</ul>
			
			<h4 class="theta caps semi">Mixed Chevron List</h4>

			<ul class="chevron-list icon-list">
				<li><a>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</a></li>
				
				<li class="download-li"><a>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</a></li>
				
				<li><a>Funds primarily support research activities, not intervention or service costs.</a></li>
			</ul>

			<h4 class="theta caps semi">Mixed Check List</h4>

			<ul class="check-list icon-list">
				<li><a>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</a></li>
				
				<li class="download-li"><a>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</a></li>
				
				<li><a>Funds primarily support research activities, not intervention or service costs.</a></li>
			</ul>
		</div>
	</li>
	
</ol>
  1. This uses the .big-numbered-list class

    Applicant Guidance:

    Research Application Guide

    Applicant Guidance:

    Research Application Guide

  2. This uses the .check-list class inside

    • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
    • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
    • Funds primarily support research activities, not intervention or service costs.
    • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
    • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
    • Funds primarily support research activities, not intervention or service costs.

    Mixed Chevron List

    Mixed Check List

Accordions

Board of Trustees

  1. This uses the .big-numbered-list class

    Applicant Guidance:

    Research Application Guide

    Applicant Guidance:

    Research Application Guide

  2. This uses the .check-list class inside

    • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
    • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
    • Funds primarily support research activities, not intervention or service costs.
    • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
    • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
    • Funds primarily support research activities, not intervention or service costs.

    Mixed Chevron List

    Mixed Check List

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.

Big Links

<ul class="big-links">
		<li class="big-links-li">
			<a class="big-links-a">
				<div class="container-fluid table-mob">
					<div class="table-cell">
						<div class="big-links-title-wrap">
							<h3 class="med big-links-heading">A Pretty Long Title That Could Potentially Go Onto Two Lines Depending on the Window Size</h3>
							<p class="big-links-desc">A description that relates to the above title that will animate in on hover.</p>
						</div>
					</div>
					
					<div class="table-cell">
						<div class="big-links-img" style="background-image: url(/assets/images/biglinks.jpg)"></div>
					</div>
				</div>
			</a>
		</li>

		<li class="big-links-li">
			<a class="big-links-a">
				<div class="container-fluid table-mob">
					<div class="table-cell">
						<div class="big-links-title-wrap">
							<h3 class="med big-links-heading">A Pretty Long Title That Could Potentially Go Onto Two Lines Depending on the Window Size</h3>
							<p class="big-links-desc">A description that relates to the above title that will animate in on hover.</p>
						</div>
					</div>
					
					<div class="table-cell">
						<div class="big-links-img" style="background-image: url(/assets/images/biglinks.jpg)"></div>
					</div>
				</div>
			</a>
		</li>
	</ul>

Board of Trustees

Grid 4-3-2-1, 3-2-1, and .border-link

<div class="grid-4-3-2-1 gamma group border-link-bg">
	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Structuring a Partnership</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Communicating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Evaluating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Structuring a Partnership</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Communicating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Evaluating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Structuring a Partnership</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Communicating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Evaluating</span>
		</a>
	</div>					
</div>

Blockquote Full

<div class="content-block bg-graylite2">

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
			
				<blockquote class="quote-full-width">
					<p>Effective programs and policies can enhance young people's lives and social science research can help us understand, build, and improve those that work best.</p>
					
					<footer>
						<cite class="">
							<span class="quote-author">Jane Goodall</span>
							<span class="quote-author-title">President</span>
						</cite>
					</footer>
				</blockquote>
				
			</div>
		</div>
	</div>			
</div>

Effective programs and policies can enhance young people's lives and social science research can help us understand, build, and improve those that work best.

Jane Goodall President