UI Components / Typography

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.

Headings

Use .page-header for page headings

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

Body Content

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.

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

Links

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