This area is an example of secondary/supplementary content which is usually in a sidebar.

<div class="bit">
  <h3 class="title">On this page</h3>
  <ul>
    <li><a href="#typography">typography</a></li>
    <li><a href="#tables">tables</a></li>
    <li><a href="#buttons">buttons</a></li>
    <li><a href="#forms">forms</a></li>
    <li><a href="#modules">modules</a></li>
    <li><a href="#colors">colors</a></li>
    <li><a href="#helpers">helpers and utility classes</a></li>
    <li><a href="#layouts">layout examples</a></li>
    <li><a href="#layout-elements">notes on layout elements</a></li>
    <li><a href="#layout-pieces">layout pieces</a></li>
    <li><a href="#wordpress">wordpress entry content</a></li>
  </ul>
</div>

<h2 id="typography" class="subtitle3">typography</h2>

<div class="title-page">
  <h1>Example Page Title</h1>
</div>

<p>This section shows some typography examples.</p>

<div class="title title-page">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>

<h3 class="subtitle">Subtitle 1</h3>
<h3 class="subtitle2">Subtitle 2</h3>
<h3 class="subtitle3">Subtitle 3</h3>

<p>You can also use classes to adjust appearance without messing up semantics: </p>

<h3 class="hd-2">This is an H3 that looks like an H2</h3>

<p>Copy types:</p>
<p class="copy-lead">Lead copy for making an impact. This should only be used for short swaths of text - no more than a paragraph usually.</p>

<p class="copy-base">Base copy size and line-height - set up for easy legibility in body copy.</p>

<p class="copy-sup">Supplementary copy is useful for text that is not the primary focus but is still part of the experience for users.</p>

<p class="copy-micro">Micro copy is good for legalese and other copy that no one wants to read but may have to post - Be careful with this use as it borders on inaccessible to low-vision users.</p>

<h2 class="hd-2 title title-page">Page level header (usually h2) - Creating semantic structure</h2>

<p>Content should be semantically correct with headers levels appropriately representing the tree structure of the page. Want to know what your pages look like semantically? <a href="https://www.w3.org/2003/12/semantic-extractor.html">You can!</a> (<a href="http://webaim.org/techniques/semanticstructure/">Why should I bother?</a>)</p>

<h3 class="hd-3 title">Section level header (usually h3)</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p><a class="cta-link" href="">This is a bold callout link</a></p>

<p>Here are some things in lists to give you examples:</p>

<h4 class="title">Unordered list and Sub-section header (usually h4)</h4>

<ul>
  <li>Regular unordered list</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

<h4>Ordered list</h4>

<ol>
  <li>Regular ordered list</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ol>

<h4>Unbulleted list</h4>

<ul class="list-unbulleted">
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

<h4>Inline list</h4>

<ul class="list-inline">
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

<h4>Inline list with piping</h4>

<ul class="list-inline-pipe">
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

Tables

Basic table

First	Last	Lineage
Aragorn II	Elessar	Son of Arathorn
Bilbo	Baggins	Bag End
Meriadoc	Brandybuck	Buckland
Treebeard	Fangorn	Fangorn Forest

Simplified and cozy

A tighter table layout.

First	Last	Lineage
Aragorn II	Elessar	Son of Arathorn
Bilbo	Baggins	Bag End
Meriadoc	Brandybuck	Buckland
Treebeard	Fangorn	Fangorn Forest

Full Semantic Set

Tables can include a variety of elements that carry semantic meaning; the following example includes a caption, colgroups with highlighted columns, headers for both columns and rows, and a table footer. It also includes some classes for special cases: a wrapper div that allows for scrolling on smaller screens, highlights for columns or cells, and classes for overriding text alignment.

Some fantastical towns and their key characteristics

Town Name	Founding feature	Weaknesses	Strengths	Primary Inhabitants	No. Inhabitants
Pernrith	Ancient water source	Low economy	Rare animal training and herbalism	People	15
Fandralore	Strong metal ores	Armorsmithing	Sustainable hunting and prosperous trade	Elves	20
Kasmord	Precious gems	Medicine	Strong magicians and refined baking	Elves	25
Total World Inhabitants					60

Responsive (with Column hiding)

The example below shows a way to hide non-essential table columns to accommodate small screens.

Town Name	Founding feature	Weaknesses	Strengths	Primary Inhabitants	No. Inhabitants
Pernrith	Ancient water source	Low economy	Rare animal training and herbalism	People	15
Fandralore	Strong metal ores	Armorsmithing	Sustainable hunting and prosperous trade	Elves	20
Kasmord	Precious gems	Medicine	Strong magicians and refined baking	Elves	25

Buttons

Base buttons

Primary Secondary Primary (disabled) Secondary (disabled)

Green primary Green secondary

Magenta primary Magenta secondary

Warn primary Warn secondary

Button variations

Subtle

Small

Pagination (aligns with kaminari ruby gem)

1 2 3 4 5 … Next › Last »

Inline/filter-type buttons

View: All Failed In Review Queue Approved

Forms

See modules for examples of banner/page-level alerts for forms which can also be used elsewhere.

Email address

Something wrong

That's not going to work - be sure to include the aria-invalid attribute

Password

Example tip help text here.

File input

Select a file from your local computer

Funders - checkboxes

Option one

Option two is disabled

Funders - radio buttons

Option one

Option two

Option three is disabled

Single select drop down Something number 1 Another thing 2 What is this thing 3 Other stuff 4 The best thing 5

Month January February March April May June July August September October November December

Year 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019

Year

Example help for the group here.

Do you need a fieldset? Here you go:

title or explanatory caption

<div class="field-wrap">
  <label for="example-select-2" class="field-label">Multi select</label>
  <select id="example-select-2" multiple class="field field-select">
    <option>One thing</option>
    <option>Two thing</option>
    <option>Three thing</option>
    <option>Four thing</option>
    <option>Five thing</option>
  </select>
</div>

Below is an inline radio button example

One option Two option 3 option Four

A larger text input <textarea id="example-textarea-1" class="field field-text field-textarea" rows="3"></textarea>

Submit

Simple input-action inline form

Search

Colors

// grayscale

$black: #111;

$black-t: #000; // true black

$white: #fafafa;

$white-warm: #ede8e2;

$white-t: #fff; // true white

$gray: #595959;

$gray-d1: #333;

$gray-d2: #222;

$gray-l1: #767676; // accessible on #fff

$gray-l2: #ccc;

$gray-l3: #dedede;

$gray-l4: #f3f3f3;

$gray-warm: #c6b6a3;

$transparent: rgba(0, 0, 0, 0);

$glare: rgba($white-t, .3);

$shadow: rgba($black-t, .5);

$smoke: rgba($gray, .3);

$wisp: rgba($gray, .1);

// pentagram colors - named

$magenta: #FF00FF;

$red: #FF0000;

$orange: #FF7700;

$yellow: #FFC800;

$green: #00C800;

$blue: #0000FF;

$blue-bright: #00C8FF;

// colors - pentagram secondary

$magenta-muted: #C702C7;

$red-muted: #D50606;

$orange-muted: #E46212;

$yellow-muted: #FFC422;

$green-muted: #008700;

$blue-muted: #1A1A83;

$blue-bright-muted: #04A6CF;

// colors - brand

$brand-primary: $black;

$brand-primary-accent: $blue;

$brand-primary2: $blue-bright; // #5BA0DF accessible on dark

$brand-secondary: $magenta-muted;

// colors - utilities

$success: $green;

$warning: $yellow;

$error: $red-muted;

$informational: $gray;

Helpers and utility classes

These classes can come in handy on occassion.

.sr: screenreader text - use this to hide text visually but allow screenreaders to speak it
.list-unbulleted: make a list not have bullets or indenting
.list-inline: make a list not have bullets or indenting AND display inline
.list-inline-pipe: make a list not have bullets or indenting AND display inline AND have little pipes in between the items
.is-hidden: hide something visually AND from screenreaders

Shame file

If there is ever a rule you just need to make work and you are not sure where is the right place, or if you are using something like !important (which you shouldn't but if you did), you can put it in the shame file for later cleanup.

Modules

Expand/collapse "see more" style

In the expand-collapse.js file, you can set how much content to show - 0 for hide it all, 100 for show 100px, etc. using the data-xheight attribute.

Not available at MIT Hayden Library Stacks: PQ2631.R63.A7 2002 v.1

  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.2 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.3 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.4 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.5 
  </li>
  <li class="result-local-location">
      <i class="fa fa-times" aria-hidden="true"></i>
    <span class="sr">Not available at MIT</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.6 
  </li>
</ul>

Not available at MIT Hayden Library Stacks: PQ2631.R63.A7 2002 v.1

  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.2 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.3 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.4 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.5 
  </li>
  <li class="result-local-location">
      <i class="fa fa-times" aria-hidden="true"></i>
    <span class="sr">Not available at MIT</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.6 
  </li>
  <li class="result-local-location">
      <i class="fa fa-times" aria-hidden="true"></i>
    <span class="sr">Not available at MIT</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002 v.1
    
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.2 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.3 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.4 
  </li>
  <li class="result-local-location">
      <i class="fa fa-check" aria-hidden="true"></i>
    <span class="sr">Available</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.5 
  </li>
  <li class="result-local-location">
      <i class="fa fa-times" aria-hidden="true"></i>
    <span class="sr">Not available at MIT</span>
    Hayden Library Stacks: PQ2631.R63.A7 2002
     v.6 
  </li> 
</ul>

Page-level/banner alert styles:

Info-style: Hmm, maybe you meant to enter a search term?

Privacy notice: Click the button. I dare you.

You're on.

Danger-style: Whoa! Hold up there, cowboy!

Warning-style: Uh oh... Are you sure?

Success-style: Yes! Rock on.

Boxed content (usually used to highlight the main content area)

Use the .box-content class on the content you want boxed (see Layouts for examples).

Bit module (often used in a sidebar context)

This is the title

Here is some content Lorem ipsum dolor sit amet, consetetur sadipscing elitr. And sometimes there are lists:

One thing
Another thing
Something else

Informational panel:

Fantastic Places of Mars

Submitter:
Submitted: less than a minute ago
Status: unknown
Permanent URL: pending submission processing

View Details -- View Sword Package -- Resubmit Package -- Delete Submission

Sunken well for missing or callout content (regular and with action):

About Discovery search

Discovery at the MIT Libraries is a new way to find books, movies, music, articles, journals, and other great stuff we have at the library. You will find results sorted into categories, Books and media, Articles and journals, and Library website, as well as links to more specific search tools and resources. If you need assistance, you can click to chat with one of the library staff.

Let us know what you think of this new tool

Get help from a research professional

Our librarians are trained to find what you need.

AskUs: Chat with a Librarian