Build relationships with the homeless in our city by hanging out at The Outlet at City Gospel Mission, a place where they can recharge and connect with people who care about them by providing positive interpersonal relationships.
The following patterns have been developed to be both fully-extensible and provide the best possible rendering & copy flow in the largest number of contexts possible.
In order to achieve a balance of both readability & relative scale across
the entire codebase, we've selected a base-font size of 16px since that is the number most
commonly associated with modern browser defaults, e.g. 16px = 1rem. Accordingly, this value has
been used to override Bootstrap's $font-size-base variable.
Use .page-header for page headings
reachout: the outlet
<p class="page-header">reachout: the outlet</p>Use .section-header for headers on sub-sections
reachout: the outlet
<p class="section-header">reachout: the outlet</p>Use .title for item titles
reachout: the outlet
<p class="title">reachout: the outlet</p>Use .control-label for form or button group labels
reachout: the outlet
<p class="control-label">reachout: the outlet</p>Use .collection-header for collections header
reachout: the outlet
<p class="collection-header">reachout: the outlet</p>Use .component-header for headers on cards, media objects and widgets
reachout: the outlet
<p class="component-header">reachout: the outlet</p>Use .list-header for list headers
reachout: the outlet
<p class="list-header">reachout: the outlet</p>To provide the best possible reading experience for any content-heavy pages, we recommend rendering most
copy with a font-size of 19px. To ensure any copy (whether encapsulated with <p>
or not) is rendered at this size,
simply wrap the main content area of your page with <main> or apply .main to
the parent element.
Build relationships with the homeless in our city by hanging out at The Outlet at City Gospel Mission, a place where they can recharge and connect with people who care about them by providing positive interpersonal relationships.
<main>
<p>Build relationships with the homeless in our city by hanging out at The Outlet at City Gospel Mission, a
place where they can recharge and connect with people who care about them by providing positive
interpersonal relationships.</p>
</main>
<div class="main">
Whether it’s playing cards, shooting pool or just sharing stories, friendships are built and hope is
transferred at The Outlet. And through the relationships established there, the homeless are then
encouraged to enter into long-term recovery programs.
</div>You can highlight a block of content by applying the .lead selector to the containing parent
element.
Build relationships with the homeless in our city by hanging out at The Outlet at City Gospel Mission, a place where they can recharge and connect with people who care about them by providing positive interpersonal relationships. Whether it’s playing cards, shooting pool or just sharing stories, friendships are built and hope is transferred at The Outlet. And through the relationships established there, the homeless are then encouraged to enter into long-term recovery programs.
<p class="lead">Build relationships with the homeless in our city by hanging out at The Outlet at City
Gospel Mission, a place where they can recharge and connect with people who care about them by providing
positive interpersonal relationships. Whether it’s playing
cards, shooting pool or just sharing stories, friendships are built and hope is transferred at The
Outlet. And through the relationships established there, the homeless are then encouraged to enter into
long-term recovery programs.</p>Use the .quiet selector when you want to decrease the prominence of a certain block of copy.
Build relationships with the homeless in our city by hanging out at The Outlet at City Gospel Mission, a place where they can recharge and connect with people who care about them by providing positive interpersonal relationships. Whether it’s playing cards, shooting pool or just sharing stories, friendships are built and hope is transferred at The Outlet. And through the relationships established there, the homeless are then encouraged to enter into long-term recovery programs.
<p class="quiet">Build relationships with the homeless in our city by hanging out at The Outlet at City
Gospel Mission, a place where they can recharge and connect with people who care about them by providing
positive interpersonal relationships. Whether it’s playing
cards, shooting pool or just sharing stories, friendships are built and hope is transferred at The
Outlet. And through the relationships established there, the homeless are then encouraged to enter into
long-term recovery programs.</p>Use .metadata for secondary, related content...
<p class="metadata">Runs: November 14 - December 25</p>Use .subtitle to boost the prominence of certain content elements...
Find Freedom
<p class="subtitle">Find Freedom</p>Use .tagline for accented copy...
Experience our live stream
<p class="tagline">Experience our live stream</p>Standalone a tags are used for actions that don't warrant a button, yet are of next highest
priority/utility.
Crossroads is one church happening in multiple locations.
<p>Crossroads is <a href="#">one church</a> happening in multiple locations.</p>Applying a class of .secondary to an a tag created a link that signifies a minor
priority/utility. These links are also found beside a button or button group to Cancel an action.
Crossroads is one church happening in multiple locations.
<p>Crossroads is <a class="secondary" href="#">one church</a> happening in multiple locations.</p>All link styles can be combined with other utility classes, i.e.,
.pull-right or .font-size-small to alter look or layout.
<div class="clearfix">
<a class="secondary font-size-small pull-right" href="#">Forgot password?</a>
<br>
<a class="secondary font-size-small pull-right" href="#">Need help?</a>
</div>
<hr>
<a class="font-size-small" href="#">Register an account</a>