Annenberg Classroom Design Patterns


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>