Components

Foundational styles form to create complex interface components.

2-1 Navs

Nav bars and links are components that serve as navigational aids, indicating the user's position or location within the site.

2-1.1 Section headings

Section headings are persistent within a given section at the top of the page and lead back to the section's landing page.

Below is a sample, generic section header; it's then followed by section-specific variants.

Section Heading

<div class="[modifier class]">
  <header class="section-header">
     <h3><a href="#">Section Heading</a></h3>
  </header>
</div>

Economic Research heading style .economic-research

Section Heading

Banking heading style .banking

Section Heading

Education heading style .education

Section Heading

Community Development heading style .community-development

Section Heading

Cash heading style .cash

Section Heading

Our District heading style .federal-reserve-bank-of-san-francisco

Section Heading

2-1.2 Section links

Links to blog sections from home page.

Sect. Link

<div class="page-template-home">
  <div class="blog_container_outer">
    <div class="blog_container_inner">
      <div class="blog_container_inner_text">
        <h1 class="blog_title"><a href="#">Sect. <span>Link</span></a></h1>
      </div>
    </div>
  </div>
</div>
<p class="cf"></p>

SF Fed blog link .blog_title

Sect. Link

#unreserved link .stories_title

Sect. Link

2-1.3 Sub-section links

Links to sub-sections found on certain landing pages, such as Community Development.

Below is a basic, unstyled sub-section link; it's then followed by section variants.

Sub Section 

<h2 class="class [modifier class]">
  <a href="#">Sub Section</a>
</h2>

Blog link style .landing-section-title-blog

Sub Section

Publication link .landing-section-title

Sub Section

Data and Initiatives link .landing-section-title-data

Sub Section

2-1.4 Headcrumbs

Indicate the current page's location within a navigational crumb.

headcrumb

<header class="section-header">
    <h4><a href="#">headcrumb</a></h4>
</header>

2-2 Grid

Grid classes are grouped by screen width. There are three main screens: desktop (d), tablet (t), and mobile (m). Columns will stack and rearrange depending on the screen size.

2-2.1 Landing

Below is an example of the grid in two-column responsive landing pages.

m-all t-all d-8of12

m-all t-all d-4of12

<main class="m-all t-all d-all cf">
  <article class="m-all t-all d-8of12 table-bordered">
    <p class="aligncenter">m-all t-all d-8of12</p>
  </article>
  <article class="m-all t-all d-4of12 table-bordered">
    <p class="aligncenter">m-all t-all d-4of12</p>
  </article>
</main>
<p class="cf"></p>

2-2.2 Offset

Align components using offset grid (indicated by grid classes that start with d-o, t-o, and m-o). The examples below are, in order, from the home and career pages.

m-all t-all d-8of12 d-o-2of12

m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12

<main class="m-all t-all d-all cf table-bordered">
  <div class="blog_container_outer m-all t-all d-all cf">
        <div class="blog_container_inner m-all t-all d-8of12 d-o-2of12 table-bordered">
      <p class="aligncenter">m-all t-all d-8of12 d-o-2of12</p>
    </div>
  </div>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf table-bordered">
  <article class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12 table-bordered">
    <p class="aligncenter">m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12</p>
  </article>
</main>
<p class="cf"></p>

2-2.3 Desktop or Landscape - 12 columns

Here, we show examples of combinations with the 12- and 2-columns grids. Other grids can be 3-, 4-, 5-, 6-, 7-, 8-, 9-, 10-, and 11-column, and their possible combinations. min-width for desktop is 1030 px.

Use "d" to indicate the desktop class for the grid.

d-1of12

d-1of12

d-1of12

d-1of12

d-1of12

d-1of12

d-1of12

d-1of12

d-1of12

d-1of12

d-1of12

d-1of12

d-3of12

d-3of12

d-3of12

d-3of12

d-4of12

d-4of12

d-4of12

d-6of12

d-6of12

d-8of12

d-4of12

d-all

<main class="m-all t-all d-all cf">
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
  <article class="d-1of12 table-bordered">
  <p class="aligncenter">d-1of12</p></article>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="d-3of12 table-bordered">
  <p class="aligncenter">d-3of12</p></article>
  <article class="d-3of12 table-bordered">
  <p class="aligncenter">d-3of12</p></article>
  <article class="d-3of12 table-bordered">
  <p class="aligncenter">d-3of12</p></article>
  <article class="d-3of12 table-bordered">
  <p class="aligncenter">d-3of12</p></article>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="d-4of12 table-bordered">
  <p class="aligncenter">d-4of12</p></article>
  <article class="d-4of12 table-bordered">
  <p class="aligncenter">d-4of12</p></article>
  <article class="d-4of12 table-bordered">
  <p class="aligncenter">d-4of12</p></article>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="d-6of12 table-bordered">
  <p class="aligncenter">d-6of12</p></article>
  <article class="d-6of12 table-bordered">
  <p class="aligncenter">d-6of12</p></article>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="d-8of12 table-bordered">
  <p class="aligncenter">d-8of12</p></article>
  <article class="d-4of12 table-bordered">
  <p class="aligncenter">d-4of12</p></article>
</main>
<span class="cf"></span>
<main class="d-all table-bordered">
  <p class="aligncenter">d-all</p>
</main>
<p class="cf"></p>

2-2.4 Desktop or Landscape - 2 columns

Use "d" to indicate the desktop class for the grid.

d-all

d-1of2

d-1of2

<main class="d-all table-bordered">
  <p class="aligncenter">d-all</p>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="d-1of2 table-bordered">
  <p class="aligncenter">d-1of2</p></article>
  <article class="d-1of2 table-bordered">
  <p class="aligncenter">d-1of2</p></article>
</main>
<p class="cf"></p>

2-2.5 Tablet - 8 columns

Tablet class has min-width: 768px and max-width: 1029px. Adjust window to appropriate size to see tablet grid.

Here, we use the 2- and 8 column grids as examples. Other grids can be 3-, 4-, 5-, 6-, 7-, 9-, 10-, 11-, and 12-column, and their possible combinations.

Use "t" to indicate the tablet class for the grid.

t-1of8

t-1of8

t-1of8

t-1of8

t-1of8

t-1of8

t-1of8

t-1of8

t-2of8

t-2of8

t-2of8

t-2of8

t-4of8

t-4of8

t-all

<main class="m-all t-all d-all cf">
  <article class="t-1of8 table-bordered">
  <p class="aligncenter">t-1of8</p></article>
  <article class="t-1of8 table-bordered">
  <p class="aligncenter">t-1of8</p></article>
  <article class="t-1of8 table-bordered">
  <p class="aligncenter">t-1of8</p></article>
  <article class="t-1of8 table-bordered">
  <p class="aligncenter">t-1of8</p></article>
  <article class="t-1of8 table-bordered">
  <p class="aligncenter">t-1of8</p></article>
  <article class="t-1of8 table-bordered">
  <p class="aligncenter">t-1of8</p></article>
  <article class="t-1of8 table-bordered">
  <p class="aligncenter">t-1of8</p></article>
  <article class="t-1of8 table-bordered">
  <p class="aligncenter">t-1of8</p></article>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="t-2of8 table-bordered">
  <p class="aligncenter">t-2of8</p></article>
  <article class="t-2of8 table-bordered">
  <p class="aligncenter">t-2of8</p></article>
  <article class="t-2of8 table-bordered">
  <p class="aligncenter">t-2of8</p></article>
  <article class="t-2of8 table-bordered">
  <p class="aligncenter">t-2of8</p></article>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="t-4of8 table-bordered">
  <p class="aligncenter">t-4of8</p></article>
  <article class="t-4of8 table-bordered">
  <p class="aligncenter">t-4of8</p></article>
</main>
<span class="cf"></span>
<main class="t-all table-bordered">
  <p class="aligncenter">t-all</p>
</main>
<p class="cf"></p>

2-2.6 Tablet - 2 columns

Tablet class has min-width: 768px and max-width: 1029px. Adjust browser window to appropriate size to see tablet grid.

Use "t" to indicate the tablet class for the grid.

t-all

t-1of2

t-1of2

<main class="t-all table-bordered">
  <p class="aligncenter">t-all</p>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="t-1of2 table-bordered">
  <p class="aligncenter">t-1of2</p></article>
  <article class="t-1of2 table-bordered">
  <p class="aligncenter">t-1of2</p></article>
</main>
<p class="cf"></p>

2-2.7 Mobile - 9 columns

Mobile class has max-width: 767 px. Adjust window to appropriate size to see mobile grid.

Here, we use the 2- and 9-column grids as examples. Other grids can be 3-, 4-, 5-, 6-, 7-, 8-, 10-, 11-, and 12-column, and their possible combinations.

Use "m" to indicate the tablet class for the grid.

m-1of9

m-1of9

m-1of9

m-1of9

m-1of9

m-1of9

m-1of9

m-1of9

m-1of9

m-3of9

m-3of9

m-3of9

m-6of9

m-3of9

m-all

<main class="m-all t-all d-all cf">
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
  <article class="m-1of9 table-bordered">
  <p class="aligncenter">m-1of9</p></article>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="m-3of9 table-bordered">
  <p class="aligncenter">m-3of9</p></article>
  <article class="m-3of9 table-bordered">
  <p class="aligncenter">m-3of9</p></article>
  <article class="m-3of9 table-bordered">
  <p class="aligncenter">m-3of9</p></article>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="m-6of9 table-bordered">
  <p class="aligncenter">m-6of9</p></article>
  <article class="m-3of9 table-bordered">
  <p class="aligncenter">m-3of9</p></article>
</main>
<span class="cf"></span>
<main class="m-all table-bordered">
  <p class="aligncenter">m-all</p>
</main>
<p class="cf"></p>

2-2.8 Mobile - 2 columns

Mobile class has max-width: 767 px. Adjust browser window to appropriate size to see mobile grid.

Use "m" to indicate the mobile class for the grid.

m-all

m-1of2

m-1of2

<main class="m-all table-bordered">
  <p class="aligncenter">m-all</p>
</main>
<span class="cf"></span>
<main class="m-all t-all d-all cf">
  <article class="m-1of2 table-bordered">
  <p class="aligncenter">m-1of2</p></article>
  <article class="m-1of2 table-bordered">
  <p class="aligncenter">m-1of2</p></article>
</main>
<p class="cf"></p>

2-2.9 Print grid

Grid to lay out printable pages, such as Boards of Directors. Use "p" to indicate the print grid class.

To see actual print layout, use print preview on your browser.

p-3of12

p-9of12

<div class="m-all t-all d-all">
    <div class="p-3of12 table-bordered">
      <p class="aligncenter">p-3of12</p>
    </div>
    <div class="p-9of12 table-bordered">
        <p class="aligncenter">p-9of12</p>
    </div>
</div>
<p class="cf"></p>

2-3 Info Boxes

Boxes or containers for social, related, or cross-promo purposes.

2-3.1 Related boxes

Related info or "Did you know" promo boxes. Use the view-more class to style special call-to-action link.

Below is a basic box; it's then followed by styled variants after the markup.

Heading

Use div and class to show appropriate background color and typography.

View More Related Info

<div class="[modifier class] m-all t-all d-4of12">
    <h3 class="">Heading</h3>
        <p>Use div and class to show appropriate background color and typography.</p>
        <p class="view-more">
            <a href="/economic-research/management/">View More Related Info</a><br>
        </p>
</div>
<p class="cf"></p>

Main related box style .landing-did-you-know

Heading

Use div and class to show appropriate background color and typography.

View More Related Info

Secondary or additional related box style .landing-additional

Heading

Use div and class to show appropriate background color and typography.

View More Related Info

2-3.2 Events box

Special box on landing pages that announces upcoming events for the department.

Upcoming Events

Upcoming Events

View all events

<div class="landing-events m-all t-all d-4of12" style="background-color: #f6f5f4">
    <img src="../assets/images/icon-event-calendar.png" width="40" height="44" alt="Upcoming Events" class="eventicon"><h3><a href="/community-development/events/">Upcoming Events</a></h3>
    <article>
        <p><span class="meta date">Date</span>, City, State</p>
        <h3 class="h2 event-title-landing"><a href="#">Event, Conference, or Forum</a></h3>
    </article>
    <p class="view-more"><a href="/community-development/events/">View all events</a></p>
</div>
<p class="cf"></p>

2-3.3 Social box

Transparent, borderless box that contains social media icons and links.

Follow Us

Youtube Facebook Twitter LinkedIn Newsletter

Follow Us

Youtube Facebook Twitter LinkedIn Newsletter 

<div class="landing-follow-section desktop m-all t-all d-4of12">
    <h3 class="landing-follow">Follow Us</h3>
    <a href="#" title="Follow us on Youtube" target="_blank" rel="noopener"><img src="../assets/images/icon-youtube.png" width="44" height="44" alt="Youtube"></a>
    <a href="#" title="Follow us on Facebook" target="_blank" rel="noopener"><img src="../assets/images/icon-facebook.png" width="44" height="44" alt="Facebook"></a>
    <a href="h#" title="Follow us on Twitter" target="_blank" rel="noopener"><img src="../assets/images/icon-twitter.png" width="44" height="44" alt="Twitter"></a>
    <a href="#" target="_blank" rel="noopener"><img src="../assets/images/icon-linkedin.png" width="44" height="44" alt="LinkedIn"></a>
    <a href="#" target="_blank" rel="noopener"><img border="0" src="../assets/images/icon-email.png" alt="Newsletter"></a>
</div>
<div class="landing-follow-section mobile m-all t-all d-4of12">
    <h3 class="landing-follow">Follow Us</h3>
    <a href="#" title="Follow us on Youtube" target="_blank" rel="noopener"><img src="../assets/images/icon-youtube.png" width="44" height="44" alt="Youtube"></a>
    <a href="#" title="Follow us on Facebook" target="_blank" rel="noopener"><img src="../assets/images/icon-facebook.png" width="44" height="44" alt="Facebook"></a>
    <a href="#" title="Follow us on Twitter" target="_blank" rel="noopener"><img src="../assets/images/icon-twitter.png" width="44" height="44" alt="Twitter"></a>
    <a href="#" title="Follow us on LinkedIn" target="_blank" rel="noopener"><img src="../assets/images/icon-linkedin.png" width="44" height="44" alt="LinkedIn"></a>
    <a href="#" title="Sign up to receive our newsletter" target="_blank" rel="noopener"><img border="0" src="../assets/images/icon-email.png" alt="Newsletter"></a>
</div>
<p class="cf"></p>

2-4 Forms

Styles of forms used for data submission.

2-4.1 Search

Search box in main and section header. Search is persistent on desktop, appearing first as clickable magnifying glass icon in main, then after scroll, in section header.

<form class="search-form" action="/search/" id="search" method="get" style="display: block; position: relative; right: 0px;">
  <input type="text" placeholder="Search SF Fed" id="s" name="q" class="field" value="">
</form>

2-4.2 Subscription

We use MailChimp form and styles.

Subscribe to our mailing lists:

FRBSF President’s Speech
FRBSF Economic Letter
FRBSF Working Papers
SF Fed Economic Trends
Center for Pacific Basin Studies (CPBS) publications

Email Format

HTML
Plain-text

*Required field

Email Address * 


<form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
  <p>Subscribe to our mailing lists:</p>
  <div class="mc-field-group input-group">
    <p>
        <input type="checkbox"> FRBSF President’s Speech<br>
        <input type="checkbox"> FRBSF Economic Letter<br>
        <input type="checkbox"> FRBSF Working Papers<br>
        <input type="checkbox"> SF Fed Economic Trends<br>
        <input type="checkbox"> Center for Pacific Basin Studies (CPBS) publications
    </p>
  </div>
  <div class="mc-field-group input-group">
    <h3>Email Format</h3>
    <p>
        <input type="radio"> HTML<br>
        <input type="radio"> Plain-text<br>
    </p>
  </div>
  <div class="required_field_area">*Required field</div>
  <div class="mc-field-group">
    <p>
      Email Address <span class="asterisk required_field_area">*</span> <input type="email" value="" name="EMAIL" class="required email" size="30">
    </p>
  <div id="mce-responses" class="clear"></div>
  <div class="clear">
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button gradient">
  </div>
</form><br />

2-5 Data Visualization

Examples of charts based on data visualization colors.

2-5.1 Qualitative Scheme

Examples of represenatations of discrete data sets. Colors do not represent magnitude differences between data sets.

Use only approved colors.

2 Colors

2-color qualitative scheme chart sample screenshot

3 Colors

3-color qualitative scheme chart sample screenshot 3-color qualitative scheme chart sample screenshot

4 Colors

4-color qualitative scheme chart sample screenshot 4-color qualitative scheme chart sample screenshot

5 Colors

5-color qualitative scheme chart sample screenshot
<h4>2 Colors</h4>
<img src="../assets//images/dataviz-qualitative-2color.jpg" width="679" height="370" alt="2-color qualitative scheme chart sample screenshot">
<h4>3 Colors</h4>
<img src="../assets//images/dataviz-qualitative-3color.jpg" width="679" height="370" alt="3-color qualitative scheme chart sample screenshot">
<img src="../assets//images/dataviz-qualitative-3color-2.jpg" width="679" height="367" alt="3-color qualitative scheme chart sample screenshot">
<h4>4 Colors</h4>
<img src="../assets//images/dataviz-qualitative-4color.jpg" width="679" height="371" alt="4-color qualitative scheme chart sample screenshot">
<img src="../assets//images/dataviz-qualitative-4color-2.jpg" width="679" height="383" alt="4-color qualitative scheme chart sample screenshot">
<h4>5 Colors</h4>
<img src="../assets//images/dataviz-qualitative-5color.jpg" width="679" height="321" alt="5-color qualitative scheme chart sample screenshot">

2-5.2 Diverging Scheme

Example of deviations from the mean.

Use only approved colors.

diverging scheme chart sample screenshot
<img src="../assets//images/dataviz-diverging-scheme.jpg" width="679" height="410" alt="diverging scheme chart sample screenshot">

2-5.3 Sequential Scheme

Example of data that progresses from low to high, lightness steps with light colors for low data values to dark colors for high data values.

Use only approved colors.

sequential scheme chart sample screenshot
<img src="../assets//images/dataviz-sequential-scheme.jpg" width="679" height="410" alt="sequential scheme chart sample screenshot">

2-5.4 Data Labels

Example of alternate colors for data labels.

Use only approved colors.

screenshot of sample alternate data labels
<img src="../assets//images/dataviz-data-labels.jpg" width="679" height="436" alt="screenshot of sample alternate data labels">

2-6 Pagination

Pagination style to navigate through pages of items, mainly for search results page.

<article role="article" class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">
  <strong>1</strong>
  <a href="/search/?q=#&amp;n=10">2</a>
  <a href="/search/?q=#&amp;n=20">3</a>
  <a href="/search/?q=#&amp;n=30">4</a>
  <a href="/search/?q=#&amp;n=40">5</a>
  <a href="/search/?q=#&amp;n=50">6</a>
  <a href="/search/?q=#&amp;n=60">7</a>
  <a href="/search/?q=#&amp;n=70">8</a>
  <a href="/search/?q=#&amp;n=80">9</a>
  <a href="/search/?q=#&amp;n=90">10</a>
  <a href="/search/?q=#&amp;n=10">Next</a>
</article>
<p class="cf"></p>

2-7 Interactive

Styles for interactive elements.

2-7.1 Podcast

Use the grid to size embedded podcasts for different screens.

<div class="m-all t-10of12 d-6of12 padding-bottom-add">
    <iframe class="audio-player" src="https://html5-player.libsyn.com/embed/episode/id/4770216/height/45/width/600/theme/standard/autoplay/no/autonext/no/thumbnail/no/preload/no/no_addthis/no/direction/forward/no-cache/true/" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen>
    </iframe>
</div>
<p class="cf"></p>

2-7.2 Video

Use the grid to size embedded videos for different screens.

<div class="responsive-embed" style="padding-bottom:56.25%;">
    <iframe src="https://player.vimeo.com/video/336812660" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
    <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72174276.js"></script>
</div>