Typography
Headings
Use the <small>
tag to mark a subheading inside of a headline.
<h2>Article I, Section 2 <small>Clauses 3-5</small></h2>
Books, Journal Articles, Court Cases
Alexander Hamilton, a framer of the U.S. Constitution, offered justification for an independent judiciary in the 78th paper of <cite>The Federalist</cite>.
Quotes
<figure class="quote">
<blockquote>
<p>The government of the Union depends almost entirely upon legal fictions; the Union is an ideal nation, which exists, so to speak, only in the mind and whose limits and extent can only be discerned by the understanding.</p>
</blockquote>
<figcaption>Alexis de Tocqueville, <cite>Democracy in America</cite> (1835)</figcaption>
</figure>
A quote can be made inline (styled sparsely to integrate into the text rather than breaking it out into a bordered box) by adding the quote-inline
class.
<figure class="quote quote-inline">
<blockquote>
<p>...</p>
</blockquote>
</figure>
Panels
Basic panel with header
<div class="panel">
<header>
<h3>Against Ratification of the Constitution</h3>
</header>
<p>...</p>
</div>
Text-excerpt panel
Add panel-excerpt
to the containing div to format a panel containing excerpts from another source. panel-intro
can be used on paragraph tags to mark text that comments on the excerpt.
<div class="panel panel-excerpt">
<header>
<h3>The Federalist No. 10: Growth will strengthen the republic</h3>
</header>
<p class="panel-intro">At the time that the Constitution was written, people worried that past republics had worked best in small governments such as city-states. James Madison saw different possibilities and argued in <cite>The Federalist</cite> that the American republic would grow stronger as it expanded because it would be harder for any one group to dominate it.</p>
<p>The smaller the society, the fewer probably will be the distinct parties and interests composing it; the fewer the distinct parties and interests, the more frequently will a majority be found of the same party...</p>
</div>
Panel with 3-column interior
This uses CSS columns to evenly distribute items according to a top-to-bottom, left-to-right layout.
<div class="panel">
<div class="panel-interior-3-column">
<p>1. William Blount, senator from Tennessee, for disloyalty to the United States; in 1799 the Senate expelled Blount and dismissed the impeachment charges against him.</p>
<p>2. John Pickering, federal judge; in 1804 the Senate found him guilty of charges of drunkenness and unlawful rulings and removed him from office.</p>
<p>3. Samuel Chase, Supreme Court justice; in 1805 the Senate found him not guilty of his alleged mishandling of a trial.</p>
<p>Etc...</p>
</div>
</div>
Panel alignment variations
Small panel (50% width), left aligned: panel-left--small
Small panel (50% width), right aligned: panel-right--small
Large panel (67% width), left aligned: panel-left--large
Large panel (67% width), right aligned: panel-right--large
Full width panel with overhang: panel--full
<div class="panel panel-left--large">
<p>...</p>
</div>
Panel color variations
Use panel--green
, panel--red
, and panel--blue
to alter the color of a panel. Drop shadow modifiers are also available (panel--green__ds
, panel--red__ds
, panel--blue__ds
).
<div class="panel panel--full panel--green__ds">
<p>...</p>
</div>