cf-typography docs

Theme variables

The following color and sizing variables are exposed, allowing you to easily override them before compiling.

Colors

@pull-quote_body
@pull-quote_citation
@micro-copy-text
@date-text
@category-slug-text
@category-slug-hover
@header-slug-thin-border
@header-slug-thick-border
@padded-header-text
@padded-header-bg
@padded-header-border
@fancy-slug-text
@fancy-slug-bg
@fancy-slug-border
@meta-header-border
@jump-link__bg
@jump-link__bg-border
@list__branded-bullet

Sizing

Pull quote

Default pull quote

<aside class="pull-quote">
    <div class="pull-quote_body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Cum corrupti tempora nam nihil qui mollitia consectetur
        corporis nemo culpa dolorum!
    </div>
    <footer>
        <cite class="pull-quote_citation">
            - Author Name
        </cite>
    <footer>
</aside>

Use a pull quote to highlight excerpts from the current work. This is not to be confused with blockquote which quotes from an external work.
Since a pull quote is an excerpt and repeats content from the article it's contained within you should use the aside element.

Large pull quote

<aside class="pull-quote pull-quote__large">
    <div class="pull-quote_body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Cum corrupti tempora nam nihil qui mollitia consectetur
        corporis nemo culpa dolorum!
    </div>
    <footer>
        <cite class="pull-quote_citation">
            - Author Name
        </cite>
    <footer>
</aside>

Micro copy

Standard micro copy

Lorem ipsum dolor sit amet

<p class="micro-copy">
    Lorem ipsum dolor sit amet
</p>

```
.micro-copy
```

Large micro copy

Lorem ipsum dolor sit amet

<p class="micro-copy micro-copy__large">
    Lorem ipsum dolor sit amet
</p>

```
.micro-copy
```

Short description

.short-desc

I am short description.

<p class="short-desc">I am short description.</p>

```
.short-desc
```

.short-desc__large (modifier)

I am large short description.

<p class="short-desc short-desc__large">I am large short description.</p>

```
.short-desc__large
```

Date

Default date

Nov 4, 2013

<span class="date">
    Nov 4, 2013
</span>

Category slug

Default category slug

Consumer finance

<a href="#" class="category-slug">
    <span class="category-slug_icon cf-icon cf-icon-dialogue"></span>
    <span class="u-visually-hidden">Category:</span>
    Consumer finance
</a>

Structural cheat sheet:
-----------------------
.category-slug
  .category-slug_icon
  .u-visually-hidden

We suggest using a .u-visually-hidden element to add more context for screen readers.

Header slug

Default header slug

Blog summary

<h2 class="header-slug">
    <span class="header-slug_inner">
        Blog summary
    </span>
</h2>

Structural cheat sheet:
-----------------------
.header-slug
  .header-slug_inner

Padded header

Default padded header

Header

<h2 class="padded-header">
    Header
</h2>

```
.padded-header
```

Fancy slug

Default fancy slug

Watchroom

<h2 class="fancy-slug">
    <span class="fancy-slug_text">
        <span class="fancy-slug_ribbon-left"></span>
        Watchroom
        <span class="fancy-slug_ribbon-right"></span>
    </span>
</h2>

Structural cheat sheet:
-----------------------
.fancy-slug
  .fancy-slug_text
      .fancy-slug_ribbon-left
      .fancy-slug_ribbon-right

Meta header

Default meta header

Nov 4, 2013 Consumer finance

<div class="meta-header">
    <span class="meta-header_right date">
        Nov 4, 2013
    </span>
    <a href="#" class="meta-header_left category-slug">
        <span class="cf-icon cf-icon-credit-card"></span>
        Consumer finance
    </a>
</div>

Structural cheat sheet:
-----------------------
.meta-header
  .meta-header_right
  .meta-header_left

.meta-header_right should come first in the markup so that when it floats to the right it will appear on the same line as .meta-header_left.
Note that the example shows .meta-header_left using the .category-slug pattern and .meta-header_right using the .date pattern but you could use other patterns in place of them. Or you can even swap them so that date is attached to .meta-header_left and .category-slug is attacked to .meta-header_right.

Alternate meta header arrangements

Nov 4, 2013

Consumer finance

<div class="meta-header">
    <a href="#" class="meta-header_right category-slug">
        <span class="cf-icon cf-icon-credit-card"></span>
    </a>
    <span class="meta-header_left date">
        Nov 4, 2013
    </span>
</div>
<br>
<div class="meta-header">
    <a href="#" class="meta-header_left category-slug">
        <span class="cf-icon cf-icon-credit-card"></span>
        Consumer finance
    </a>
</div>

Just some random variations to show off what you could do.

Links with icons

Styles to enable adding an icon to a link and preventing the link's underline from extending under the icon.
For the underlined icon prevention to work, you must wrap the link text with a `span.icon-link_text`. There can be no whitespace between the text and the opening and closing span tags.

Default link with icon

For more information, email john.smith@cfpb.gov . Alternatively, you can download the info sheet . Oh, you might also want to visit this other organization's website for further details.

Visit another section of our site

<p>
    For more information, email
    <a class="icon-link icon-link__mail" href="#">
        <span class="icon-link_text">john.smith@cfpb.gov</span>
    </a>.
    Alternatively, you can
    <a class="icon-link icon-link__download" href="#">
        <span class="icon-link_text">download the info sheet</span>
    </a>.
    Oh, you might also want to visit this
    <a class="icon-link icon-link__external-link" href="#">
        <span class="icon-link_text">other organization's website</span>
    </a> for further details.
</p>
<a class="icon-link icon-link__right" href="#">
    Visit another section of our site
</a>

The modifier names match the cf-icon names of commonly-used icons.
Icons appear to the right of a link, by default.

Links with icons on the left (modifier)

john.smith@cfpb.gov
(123) 456-7890

<a class="icon-link icon-link__mail icon-link__before" href="#">
    <span class="icon-link_text">john.smith@cfpb.gov</span>
</a><br>
<a class="icon-link icon-link__phone icon-link__before" href="#">
    (123) 456-7890
</a>

Simply add the `.icon-link__before` modifier to place the icon before the link text.
You can omit the `span.icon-link_text` wrapper if you do not need an underline on a particular link.

Non-wrapping icon links

For more information, email john.smith@cfpb.gov .

<p>
    For more information, email
    <a class="icon-link icon-link__mail icon-link__no-wrap" href="#">
        <span class="icon-link_text">john.smith@cfpb.gov</span>
    </a>.
</p>

Warning: Icons added to inline links can sometimes break onto the next line. If you want to prevent this, you can add the `__no-wrap` modifier to `.icon-link`.

Styled link

.styled-link

Default styled link

<a class="styled-link" href="#">
    Default styled link
</a>

```
.styled-link
```

Jump link

.jump-link

Default jump link

<a class="jump-link" href="#">
    <span class="jump-link_text">Default jump link</span>
</a>

```
.jump-link
```

.jump-link__large (modifier)

Large jump link

<a class="jump-link jump-link__large" href="#">
    <span class="jump-link_text">Large jump link</span>
</a>

```
.jump-link__large
```

18px font-size, compared to the default of 16px

.jump-link__<icon> (modifier)

Jump link using the right icon from cf-icons

<a class="jump-link jump-link__right" href="#">
    <span class="jump-link_text">Jump link using the right icon from cf-icons</span>
</a>

```
.jump-link__<icon>
```

.jump-link extends .icon-link, so all that is needed to add an icon to a jump link is to add a modifier with the icon's name.

.jump-link__before (modifier)

Jump link with icon on left

<a class="jump-link jump-link__left jump-link__before" href="#">
    <span class="jump-link_text">Jump link with icon on left</span>
</a>

```
.jump-link__<icon>.jump-link__before
```

Jump links can also have icons before the text, like icon links.

.jump-link__bg (modifier)

Jump link with grey background and solid borders on small screens

<a class="jump-link jump-link__bg" href="#">
    <span class="jump-link_text">Jump link with grey background and
        solid borders on small screens</span>
</a>

```
.jump-link__bg
```

Block link

.block-link

Default block link

<a class="block-link" href="#">
    Default block link
</a>

```
.block-link
```

Convert a standard inline link to a block-level element with padding, background, and borders.
Primarily used within a max-width 599px media query (see .jump-link and .list__links).

Unstyled list modifier

<ul class="list list__unstyled">
    <li class="list_item">
        <a class="list_link">List item 1</a>
    </li>
    <li class="list_item">
        <a class="list_link">List item 2</a>
    </li>
    <li class="list_item">
        <a class="list_link">List item 3</a>
    </li>
</ul>

```
.list.list__unstyled
```

Spaced list modifier

Default example

List item 1
List item 2
List item 3

<ul class="list list__spaced">
    <li class="list_item">
        <a class="list_link">List item 1</a>
    </li>
    <li class="list_item">
        <a class="list_link">List item 2</a>
    </li>
    <li class="list_item">
        <a class="list_link">List item 3</a>
    </li>
</ul>

```
.list.list__spaced
```

Spaced list item modifier

Default example

List item 1
List item 2
List item 3
List item 4

<ul class="list">
    <li class="list_item">
        <a class="list_link">List item 1</a>
    </li>
    <li class="list_item">
        <a class="list_link">List item 2</a>
    </li>
    <li class="list_item list_item__spaced">
        <a class="list_link">List item 3</a>
    </li>
    <li class="list_item">
        <a class="list_link">List item 4</a>
    </li>
</ul>

Horizontal list modifier

Default example

List item 1
List item 2
List item 3

<ul class="list list__horizontal">
    <li class="list_item">
        <a class="list_link">List item 1</a>
    </li>
    <li class="list_item">
        <a class="list_link">List item 2</a>
    </li>
    <li class="list_item">
        <a class="list_link">List item 3</a>
    </li>
</ul>

Icon list modifier

Set up a list with icons on the left, in place of bullets.
Will need some more work to allow lines to wrap.

Default example

List item 1
List item 1
List item 1

<ul class="list list__icons">
    <li class="list_item">
        <span class="cf-icon cf-icon-email list_icon"></span>
        List item 1
    </li>
    <li class="list_item">
        <span class="cf-icon cf-icon-phone list_icon"></span>
        List item 1
    </li>
    <li class="list_item">
        <span class="cf-icon cf-icon-fax list_icon"></span>
        List item 1
    </li>
</ul>

Link list modifier

The link list modifier is intended to be used for lists where each item is a link. It converts to a finger-friendly link with a large tap area on smaller screens.

Default example

<ul class="list list__links">
    <li class="list_item">
        <a class="list_link" href="#">List item 1</a>
    </li>
    <li class="list_item">
        <a class="list_link" href="#">List item 2</a>
    </li>
    <li class="list_item">
        <a class="list_link" href="#">List item 3</a>
    </li>
</ul>

Link list with icons

<ul class="list list__links list__icons">
    <li class="list_item">
        <a class="list_link icon-link icon-link__before icon-link__email"
           href="#">
            <span class="icon-link_text">List item 1</span>
        </a>
    </li>
    <li class="list_item">
        <a class="list_link icon-link icon-link__before icon-link__phone"
           href="#">
            <span class="icon-link_text">List item 2</span>
        </a>
    </li>
    <li class="list_item">
        <a class="list_link icon-link icon-link__before icon-link__fax"
           href="#">
            <span class="icon-link_text">List item 3</span>
        </a>
    </li>
</ul>

Custom bullet mixin

Custom bullet

.custom-bullet(@text, @color, @offset, @size, @font, @type)

Displays custom bullets to the left of specified elements as :before pseudo elements.
To use, pass this mixin values for the bullet to be displayed: text, color, font size, and offset (distance away from the parent element the bullet should appear). Font family parameter is optional and defaults to inherited.
Bullets are absolutely positioned outside of their parent's flow, so they will not receive certain properties applied to the parent (borders, text-decoration, etc).
By default, custom bullets hang outside of their parent's content box (in the margin or padding if there is any). If you want the bullets to align with the left boundary of the parent's content box, give the parent a left margin value equal to the offset.

Branded list modifier

Branded list

First item
Second item
Third item

<ul class="list__branded">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

```
.list__branded
```

Uses .custom-bullet mixin to generate custom main-brand-color square bullets.

</> cf-typography docs

Theme variables

Colors

Sizing

Pull quote

Default pull quote

Large pull quote

Micro copy

Standard micro copy

Large micro copy

Short description

.short-desc

.short-desc__large (modifier)

Date

Default date

Category slug

Default category slug

Header slug

Default header slug

Blog summary

Padded header

Default padded header

Header

Fancy slug

Default fancy slug

Watchroom

Meta header

Default meta header

Alternate meta header arrangements

Links with icons

Default link with icon

Links with icons on the left (modifier)

Non-wrapping icon links

Styled link

.styled-link

Jump link

.jump-link

.jump-link__large (modifier)

.jump-link__<icon> (modifier)

.jump-link__before (modifier)

.jump-link__bg (modifier)

Block link

.block-link

Unstyled list modifier

Default example

Spaced list modifier

Default example

Spaced list item modifier

Default example

Horizontal list modifier

Default example

Icon list modifier

Default example

Link list modifier

Default example

Link list with icons

Custom bullet mixin

Custom bullet

Branded list modifier

Branded list