<Link to DPC Code Updates/>

Chapter Title

Some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here.

<Link back to DPC Code Update />

Subtitle

Some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here and an interesting link you want to click on.¹

<Link back to DPC Code Update />

Sub-section Title

Some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here and an interesting link outside the board. ^{<Link back to DPC Code Update />}

<Link back to DPC Code Update />

Sub-section Title (Alternative)

Some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here some body text goes here and an interesting link you want to click on.²

Bulleted list:

• A strong title. An interesting link and some list body text.
• Another strong Title. And another interesting link outside the board and some list body text; another link, and some list body text; and wait another link, and some more list body text.
• And yet another strong title and yet another interesting link along with some more list body text.

Numbered list:

1. A strong title. An interesting link and some list body text.
2. Another strong title. And another interesting link and some list body text; another link, and some list body text; and wait another link, and some more sublinks:
   1. Some sublink.
   2. Some sublink.
   3. Some sublink.
3. And yet another strong title and yet another interesting link along with some more list body text.³

Icon list:

• Federal Reserve Bank city Federal Reserve Bank city
• Federal Reserve Branch city Federal Reserve Branch city
• Board of Governors of the Federal Reserve System, Washington, D.C. Board of Governors of the Federal Reserve System, Washington, D.C.
• Branch boundary Branch boundary

Definition List (ie. Abbreviations):

<Link back to DPC Code Update />

Panel Boxes

<Link back to DPC Code Update />

Panel Box with all the elements

Simple Panel Box with 2-up display

Letter Box Examples

Figures

Or a full-width scalable image with no title bar:

<Link back to DPC Code Update />

Tables

Table 1. Responsive Table w/ Sticky Headers

Table Unit of measure (ie. Millions of dollars)

Table 4. Operating expenses of the Board of Governors, by account classification, 2013-14
Millions of dollars

Account classification	2013 budget 1	2013 actual	Variance 2013 budget to 2013 actual		2014 budget	Variance 2014 budget to 2013 actual
			Amount	Percent		Amount	Percent
Personnel services
Salaries	314.3	307.2	-7.1	-2.3	328.0	20.8	6.8
Retirement/thrift plans	43.3	40.2	-3.1	-7.1	42.2	2.0	4.9
Employee insurance	28.9	26.3	-2.6	-9.0	28.6	2.3	8.6
Subtotal, personnel services	386.5	373.7	-12.8	-3.3	398.7	25.0	6.7
Goods and services
Postage and shipping	0.7	0.3	-0.4	-62.9	0.5	0.3	107.7
Travel	14.2	13.7	-0.5	-3.2	15.1	1.4	9.8
Telecommunications	7.4	6.0	-1.5	-19.6	7.9	2.0	32.9
Printing and binding	2.4	1.5	-1.0	-39.6	2.2	0.7	49.0
Publications	0.6	0.5	-0.2	-25.0	0.6	0.2	42.2
Stationery and supplies	1.6	1.4	-0.2	-15.0	2.3	1.0	70.6
Software	12.1	11.4	-0.7	-5.7	17.1	5.7	49.9
Furniture and equipment	9.7	7.7	-2.0	-20.2	14.3	6.5	84.4
Rentals	12.8	12.4	-0.4	-3.0	16.2	3.7	30.1
Books and subscriptions	1.1	1.0	-0.1	-8.2	1.3	0.3	28.7
Utilities	3.9	3.3	-0.6	-14.9	3.6	0.3	8.7
Repairs and alterations bldg.	3.0	2.5	-0.6	-18.3	3.0	0.6	22.4
Repairs and maintenance F&E	2.9	3.4	0.5	17.2	3.3	-0.1	-3.2
Contingency processing center	1.3	1.3	0.0	-3.1	1.3	0.1	5.6
Contractual professional services	71.8	62.2	-9.6	-13.3	64.5	2.2	3.6
Interest expense	* *	*	0.0	0.0	*	*	-50.0
Tuition	4.9	3.9	-1.0	-20.2	5.1	1.2	29.9
Subsidies and contributions	0.8	0.7	-0.1	-10.0	0.8	0.1	9.7
Depreciation amortization	24.1	23.8	-0.4	-1.5	27.7	4.0	16.7
All other 2	-1.8	-2.6	-0.8	44.4	-1.3	1.3	-50.0
Subtotal, goods and services	173.5	154.2	-19.3	-11.1	185.5	31.2	20.2
Total, Board operations	559.9	527.9	-32.0	-5.7	584.2	56.3	10.7
Office of Inspector General
Personnel services	16.9	19.0	2.0	12.1	18.3	-0.7	-3.8
Goods and services	10.0	6.9	-3.1	-31.2	8.7	1.8	26.0
Total, OIG operations	26.9	25.8	-1.1	-4.1	26.9	1.1	4.3

1. 2013 budget figures do not reflect internal transfers between divisions during the year. Return to table

2. All other includes, among other items, income from outside agencies for data processing services, rental income, and transportation subsidy benefits for employees. Return to table

* Less than $500 thousand.

… Not applicable.

A Simple Responsive Table with No Headers

Expected cash flows:
Expected employer contributions - 2014	$ 240,788
Expected benefit payments: *
2014	$ 240,788
2015	$ 318,244
2016	$ 399,161
2017	$ 483,738
2018	$ 576,898
2019-2023	$ 4,398,804

Text Column Patterns

Single Column Blocks: 3-columns(desktop), 2-columns(tablet), full-width(mobile)

Single Column Blocks: 2-columns(desktop/tablet), full-width(mobile)

Multiple Columns Blocks: 3-columns(desktop), 2-columns(tablet), full-width(mobile)

Statistical Tables

1. Federal Reserve open market transactions, 2013
2. Federal Reserve Bank holdings of U.S. Treasury and federal agency securities, December 31, 2011-2013
3. Federal Reserve Bank interest rates on loans to depository institutions, December 31, 2013
4. Reserve requirements of depository institutions, December 31, 2013
5. Banking offices and banks affiliated with bank holding companies in the United States, December 31, 2012 and 2013
6.  
   1. Reserves of depository institutions, Federal Reserve Bank credit, and related items, year-end 1984-2013 and month-end 2013
   2. Loans and other credit extensions, by type, year-end 1984-2013 and month-end 2013
   3. Reserves of depository institutions, Federal Reserve Bank credit, and related items, year-end 1918-1983
7. Principal assets and liabilities of insured commercial banks, by class of bank, June 30, 2013 and 2012
8. Initial margin requirements under Regulations T, U, and X
9.  
   1. Statement of Condition of the Federal Reserve Banks, by Bank, December 31, 2013 and 2012
   2. Statement of Condition of the Federal Reserve Banks, December 31, 2013 and 2012 Supplemental information–collateral held against Federal Reserve notes: Federal Reserve agents’ accounts
10. Income and expenses of the Federal Reserve Banks, by Bank, 2013
11. Income and expenses of the Federal Reserve Banks, 1914-2013
12. Operations in principal departments of the Federal Reserve Banks, 2010-13
13. Number and annual salaries of officers and employees of the Federal Reserve Banks, December 31, 2013
14. Acquisition costs and net book value of the premises of the Federal Reserve Banks and Branches, December 31, 2013

References

<!-- DPC Code Updates -->

#1: Chapter Titles 

CURRENT HTML: <h2 class="borderdash"> (See example)

NEW HTML: <h4 class="text-uppercase"> (See example) 

---------------------------------------------------------------------------------------

#2: DELETE all instances of 'In this Section' boxes
(See example from current site)

    <div class="jumpArea jumpSection"> 
        <h4 class="jumpHeader">In this Section: </h4> 
        <div class="jumpBox"> 
            <ul> 
            <li><a href="#subsection-133-45545816">Members</a></li> 
            <li><a href="#subsection-134-45562750">Divisions and Officers</a></li> 
            </ul> 
            <div class="clear"> 
            </div> 
        </div> 
        <!--  CLOSES .jumpBox  -->
    </div> 
    <!--  CLOSES .jumpArea .jumpSection  -->

---------------------------------------------------------------------------------------

#3: Subtitles

CURRENT HTML: <h3 class="border"> (See example)

NEW HTML: <h5 class="text-capitalize"> (See example)

---------------------------------------------------------------------------------------

#4: Sub-section Titles

CURRENT HTML: <h4 class="option1"> (See example)

NEW HTML: <h5 class="alt"> (See example)

---------------------------------------------------------------------------------------

#5: External Link Exit Icons

CURRENT HTML: (See example)
<img alt="Leaving the Board" src="../imgs/exitIcon.svg" class="exitIcon" border="0">

NEW HTML: (See example)

<svg role="img" class="icon" viewBox="0 0 256 256">
  <use xlink:href="../icons/svg-defs.svg#icon-external-link"></use>
  <title>External link</title>
</svg>

---------------------------------------------------------------------------------------

#6: Alternative Sub-section Titles 

CURRENT HTML: <h6 class="bold"> (See example)

NEW HTML: <h5 class="alt2"> (See example)

---------------------------------------------------------------------------------------

#7: Back to Section Top 

CURRENT HTML: (See example)

    <p class="backtotop"> 
        <a href="#subsection-12-3E45F67G">Back to section top</a>   
    </p>
    
NEW HTML: (See example)

    <div class="backtotop"> 
	<a href="#subsection-12-3E45F67G" title="Back to Section Top"> 
	  <svg role="img" class="icon icon-xs" viewBox="0 0 256 256">
	    <use xlink:href="../icons/svg-defs.svg#icon-backtop"></use>
	  </svg>
    	</a> 
        <span><a href="#subsection-12-3E45F67G" title="Back to Section Top">Back to section top</a></span>
    </div>
 

---------------------------------------------------------------------------------------

Update #8: All Shaded/Boxed Areas 

CURRENT HTML: (See example)

    <div class="shadedbox"> 
        <h3>...</h3>   
        <p>...</p>
        <a href="#xformorebackgroundonboardoperations-4564d797r">Return to text</a>
    </div> 
    
NEW HTML: (See example)

    <div class="panel panel-default"> 
        <div class="panel-heading"> 
            <h5 class="panel-title">...</h5>   
        </div>
        <div class="panel-body"> 
            <p>...</p>
            <a href="#xformorebackgroundonboardoperations-4564d797r">Return to text</a>
        </div> 
    </div>


---------------------------------------------------------------------------------------

Update #9: Tables

CURRENT HTML: (See example)
    
    <a name="x543f09c1"></a>
    <table summary="Table 2. Activity in Federal Reserve priced services, 2011-13" id="x543f09c1"
    class="pubtables">
    	<caption class="tablehead">Table 2. Activity in Federal Reserve priced services, 2011-13
    	<br/>
    	<span class="tableunit">Thousands of items</span></caption>
    	<colgroup>
    	<col/>
    	<col span="5" width="16%"/>
    	</colgroup>
    	<thead>
    		<!- Get rid of all nowrap="nowrap" in <th> or <td> tags -->
    	</thead>
    	<tbody>
    		<!- Get rid of all nowrap="nowrap" in <th> or <td> tags -->
    	</tbody>
    </table>
    
NEW HTML: (See example)

    <a name="x543f09c1"></a>
    <h5 class="tablehead">Table 2. Activity in Federal Reserve priced services, 2011-13</h5>
    <span class="tableunit">Thousands of items</span>
    <table summary="Table 2. Activity in Federal Reserve priced services, 2011-13" id="x543f09c1"
    class="sticky-table overflow-y pubtables">
    	<caption class="tablehead">Table 2. Activity in Federal Reserve priced services, 2011-13
        <br/>
    	<span class="tableunit">Thousands of items</span></caption>
        <colgroup>
    	<col/>
    	<col span="5" width="16%"/>
    	</colgroup>
    	<thead>
    		<!- Get rid of all nowrap="nowrap" in <th> or <td> tags -->
            <!-- Everything else is the same -->
    	</thead>
    	<tbody>
        	<!- Get rid of all nowrap="nowrap" in <th> or <td> tags -->
    		<!-- Everything else is the same -->
    	</tbody>
    </table>