<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>.
<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
<figure class="quote quote-inline"> <blockquote> <p>...</p> </blockquote> </figure>
Basic panel with header
<div class="panel"> <header> <h3>Against Ratification of the Constitution</h3> </header> <p>...</p> </div>
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:
Small panel (50% width), right aligned:
Large panel (67% width), left aligned:
Large panel (67% width), right aligned:
Full width panel with overhang:
<div class="panel panel-left--large"> <p>...</p> </div>
Panel color variations
panel--blue to alter the color of a panel. Drop shadow modifiers are also available (
<div class="panel panel--full panel--green__ds"> <p>...</p> </div>