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)
.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-green
.c-orange
.c-purpledark
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>
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 -->
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>
<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.
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.

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.

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.
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.
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.
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>
College Graduation is the Bottom Line
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.
Read MoreCollege Graduation is the Bottom Line
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.
Read MoreCollege Graduation is the Bottom Line
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.
Read MoreCollege Graduation is the Bottom Line
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.
Read MoreCollege Graduation is the Bottom Line
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.
Read MoreCollege Graduation is the Bottom Line
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.
Read MoreLists
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>
-
This uses the .big-numbered-list class
-
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.
- 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
- 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.
- 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 Check List
- 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.
- 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.
Accordions
Board of Trustees
-
This uses the .big-numbered-list class
-
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.
- 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
- 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 Check List
- 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.
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
-
A Pretty Long Title That Could Potentially Go Onto Two Lines Depending on the Window Size
A description that relates to the above title that will animate in on hover.
-
A Pretty Long Title That Could Potentially Go Onto Two Lines Depending on the Window Size
A description that relates to the above title that will animate in on hover.
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.