Skip to main content

Styleguide

This is the .intro style (or .lead in Bootstrap) to give extra impact to an opening sentence or two.

The below is meant to provide content editors with an overview of what is possible in the current theme. Some styles and classes are available in the WYSIWYG menu while others require manual editing of the source code.

Heading Styles

Main Content Page Heading (Heading 1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero. In vitae libero sit amet velit lobortis congue in eu velit.

Primary Section Title (Heading 2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero. In vitae libero sit amet velit lobortis congue in eu velit.

Secondary Section Title (Heading 3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero. In vitae libero sit amet velit lobortis congue in eu velit.

Tertiary Section Title (Heading 4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero. In vitae libero sit amet velit lobortis congue in eu velit.

Subsection Title (Heading 5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero. In vitae libero sit amet velit lobortis congue in eu velit.

Subsection Title (Heading 6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero. In vitae libero sit amet velit lobortis congue in eu velit.

Back to Top

Horizontal Rules

Default
.accent1
.accent2
.accent3
.accent4
.accent5
.invisible (no visible line, spacer only)
.dotted
.dashed
.double
.heavy (can be paired with any accent above except "double")
.extra-heavy (can be paired with any accent above except "double")
.fade (can be paired with any style)
.flourish (replace with your own vector logo or seal, default seal requires SVG support)
.bigred (requires SVG support)
Back to Top

Images

Full-width image

Full-width image.

Floated Image w/caption

The Big Red Bear pauses for a photo with his adoring fans.
Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Suspendisse non nisl sit amet velit hendrerit rutrum. Cras id dui. Fusce egestas elit eget lorem. Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Phasellus viverra nulla ut metus varius laoreet. Aenean ut eros et nisl sagittis vestibulum.

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Suspendisse non nisl sit amet velit hendrerit rutrum. Cras id dui. Fusce egestas elit eget lorem. Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Phasellus viverra nulla ut metus varius laoreet. Aenean ut eros et nisl sagittis vestibulum.

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Suspendisse non nisl sit amet velit hendrerit rutrum. Cras id dui. Fusce egestas elit eget lorem. Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Phasellus viverra nulla ut metus varius laoreet. Aenean ut eros et nisl sagittis vestibulum.

Two-columned images w/captions

The Big Red Bear pauses for a photo with his adoring fans.
Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue
The Big Red Bear pauses for a photo with his adoring fans.
Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue

Three-columned images w/captions

The Big Red Bear pauses for a photo with his adoring fans.
Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue
The Big Red Bear pauses for a photo with his adoring fans.
Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue
The Big Red Bear pauses for a photo with his adoring fans.
Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue

Two-columned images with single caption

The Big Red Bear pauses for a photo with his adoring fans.The Big Red Bear pauses for a photo with his adoring fans.
Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue. Sed aliquam ultrices mauris.

Three-columned images with single caption

The Big Red Bear pauses for a photo with his adoring fans.The Big Red Bear pauses for a photo with his adoring fans.The Big Red Bear pauses for a photo with his adoring fans.
Sed aliquam ultrices mauris. Etiam ultricies nisi vel augue. Sed aliquam ultrices mauris.
Back to Top

Cornell.edu Icons

  • .icon-arrow-down

  • .icon-arrow-left
  • .icon-arrow-right
  • .icon-arrow-thin-right
  • .icon-arrow-up
  • .icon-check
  • .icon-clear-day
  • .icon-clear-night
  • .icon-clocktower
  • .icon-clocktower-bold
  • .icon-close
  • .icon-email
  • .icon-facebook
  • .icon-fog
  • .icon-info-alert
  • .icon-info-heart
  • .icon-info-news
  • .icon-info-pawprint
  • .icon-instagram
  • .icon-menu
  • .icon-overcast
  • .icon-partly-cloudy-day
  • .icon-partly-cloudy-night
  • .icon-plus
  • .icon-rain
  • .icon-reset
  • .icon-search
  • .icon-search-big
  • .icon-sleet
  • .icon-snow
  • .icon-submenu
  • .icon-thunderstorm
  • .icon-twitter
  • .icon-windy
  • .icon-youtube
Back to Top

Inline Styles

There are various ways to highlight or emphasize text within a paragraph. Traditional and tags can be used for basic strong and italic styling. There are also special CSS classes that can be added to these tags, or to tags, to apply a more distinctive appearance. One example used throughout this document is strong.tutorial, which produces bold, blue text to draw attention to important terms such as labels, values, tips, or steps in a process.

Text Highlights

Five basic highlight colors are provided, with the classes .text-highlight-red, .text-highlight-green, .text-highlight-yellow, .text-highlight-blue, and .text-highlight-purple. These classes can be applied to tags, or to an HTML5 newcomer, the tag. The default mark tag is bright yellow (or a very dim yellow in Bootstrap), while the five highlight colors below are a bit more muted but still easy to pick out from a white background. Lorem ipsum dolor sit amet. Fusce id tellus libero. In vitae libero sit amet velit lobortis congue in eu velit. Mauris venenatis, nisi vitae ultricies semper, leo dolor porta risus, vitae molestie magna sapien iaculis nibh. Etiam facilisis mauris sed arcu tempus vel dapibus dui molestie. Morbi vitae lacus metus, vel porttitor eros. Duis sed consectetur ipsum. Curabitur et velit in ante dignissim scelerisque. Duis non ipsum at mi pharetra consequat. Quisque eu tortor non ipsum laoreet feugiat. Sed blandit volutpat ligula, dui nec eros varius ac molestie ante malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Donec congue dui at velit consectetur fermentum. Fusce id tellus libero. Donec congue dui at velit consectetur fermentum.

Blockquote

Standard Blockquote

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Content inside a blockquote other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

Impact Blockquote

Some have called Cornell the “first American university.”

Offset Blockquote

Some have called Cornell the “first American university.”

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.

Back to Top

Panels and Accent Options

Panels

Default (class="panel")

Blue-Green (class="panel accent-blue-green")

Blue (class="panel accent-blue")

Purple (class="panel accent-purple")

Gold (class="panel accent-gold")

Green (class="panel accent-green")

Red (class="panel accent-red")

Fill Background

Hint: Use the .no-border class to omit the default 1px border.

Default (class="panel fill")

Blue-Green (class="panel accent-blue-green fill")

Blue (class="panel accent-blue fill")

Purple (class="panel accent-purple fill")

Gold (class="panel accent-gold fill")

Green (class="panel accent-green fill")

Red (class="panel accent-red fill")

Heavy Border (left or top, with or without fills)

Default (class="panel fill heavy-left")

Blue-Green (class="panel accent-blue-green heavy-left")

Blue (class="panel accent-blue fill heavy-left")

Purple (class="panel accent-purple heavy-top")

Gold (class="panel accent-gold fill heavy-top")

Green (class="panel accent-green heavy-top")

Red (class="panel accent-red fill heavy-top")

Indenting

Indent 1 Step (class="panel indent1")

Indent 2 Steps (class="panel indent2")

Indent 3 Steps (class="panel indent3")

Indent 4 Steps (class="panel indent4")

Back to Top

Lists

Unordered List

  • List Item
  • List Item
    • Nested List Item
    • Nested list item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.
    • Double Nested
      • Nested List Item
      • Nested List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • Nested Ordered:
    1. Nested List Item
      • Nested Unordered List Item
      • Nested Unordered List Item
    2. Nested List Item
  • List Item

Ordered Lists

  1. List Item

  2. List Item
  3. List Item
  1. List Item
  2. List Item
  3. List Item
  1. List Item
  2. List Item
  3. List Item
  1. List Item
  2. List Item
  3. List Item
  1. List Item
  2. List Item
  3. List Item
  1. List Item
  2. List Item
  3. List Item

Custom Unordered List

Icon-driven bullets can be used for higher visual impact. The .custom class on its own will only apply to direct children in the list structure, allowing finer control (custom bullets are often best-suited to single-level lists). In a case where you'd like the icons to appear for all nested list items as well, include the .recursive class. It will apply to all Unordered List descendants, but will not apply to any Ordered Lists that are mixed in. By default, Custom Unordered List bullets use a FontAwesome caret glyph. A few other out-of-the-box options are also provided below. The Status option uses Material Design Iconic glpyhs.

Simple (ul.custom)

  • List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.
  • List Item
  • Nested Ordered:
    1. Nested List Item
      • Nested Unordered List Item
      • Nested Unordered List Item
    2. Nested List Item
  • List Item

Recursive (ul.custom.recursive)

  • List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.

  • List Item
  • Nested Ordered:
    1. Nested List Item
      • Nested Unordered List Item
      • Nested Unordered List Item
    2. Nested List Item
  • List Item

Chevrons (ul.custom.chevrons)

  • List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.

  • List Item

Success Checkmarks (ul.custom.success)

  • List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.

  • List Item

Failure X's (ul.custom.failure)

  • List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.

  • List Item

Failure Warnings (ul.custom.warning)

  • List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.

  • List Item

Notifications (ul.custom.notifications)

  • List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.

  • List Item

Status Message (ul.custom.status)

  • List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.

  • List Item

On/Off (ul.custom.on-off)

Use the .on or .off class on

  • tags to mark each item.

    • This item is on/enabled/passed.

    • This item is off/disabled/failed.
    • This one's unknown or not set. Oh no!

    On/Off as Steps (ul.custom.on-off-steps)

    Use the .on or .off class on

  • tags to mark each item.

    • This step is complete.

    • This step is not.
    • This one's unknown or not set. Oh no!

    On/Off as Toggle (ul.custom.on-off-toggle)

    Use the .on or .off class on

  • tags to mark each item. Note: These would typically be made into buttons, to provide the expected user experience.

    • This option is enabled.

    • This option is disabled.
    • This one's unknown or not set. Oh no!

    Nerdy List (ul.custom.nerd)

    • A nerdy list item.

    • A nerdy list item.
    • Not a nerdy item. (how'd this get in here?)
    • A nerdy item once more. (thank goodness!)

Custom Ordered List

Prominent numbered bullets can be used to communicate an emphasized sense of sequence. Custom Ordered Lists follow the same recursion rules as Unordered Lists above. They utilize styled typography and automatic numbering.

Simple (ol.custom)

  1. List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.
  2. List Item
  3. Nested Unordered:
    • Nested List Item
      1. Nested Ordered List Item
      2. Nested Ordered List Item
    • Nested List Item
  4. List Item

Recursive (ol.custom.recursive)

  1. List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae.

  2. List Item
  3. Nested Unordered:
    • Nested List Item
      1. Nested Ordered List Item
      2. Nested Ordered List Item
    • Nested List Item
  4. List Item

Large (ol.custom.large)

  1. List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae adipiscing elit.

  2. List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae adipiscing elit.
  3. List item ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae adipiscing elit.
Back to Top

Lists as Menus

The .list-menu system quickly removes bullets and adjusts the layout of list items to fit many common use-cases.

Basic

List Menu (ul.list-menu)

Vertical List Menu (ul.list-menu.vertical)

With Dividers

List Menu (ul.list-menu.divs)

Vertical List Menu (ul.list-menu.vertical.divs)

With Button Links

List Menu (ul.list-menu.links)

Vertical List Menu (ul.list-menu.vertical.links)

Back to Top

Tables

To minimize incompatibility with other table-based functionality, custom styles are only applied to tables which include a .table class. While options are included for borderless tables, a cell border will always be included when printed, since background colors are commonly omitted when printing from a web browser.

CSS Class Options TABLE.class

  • .table - The base class needed to activate custom styles. Nothing below will work without it.
  • .bordered - Activates full bordering on all table cells for a traditional spreadsheet look (mutually exclusive with .flat).
  • .flat - Removes all borders, relying instead on subtle tinting (mutually exclusive with .bordered).
  • .striped - Applies an alternating row tint for easier readability. This option can be paired with all other options (bordered, flat, colored, etc).
  • .colored - Applies a subtle blue color palette with gray row headers. Lookin sharp!
  • .rainbow - Applies a not-so-subtle multi-color palette in which columns cycle through five colors for easier differentiation. While a bit whimsical in its default appearance, it can provide a model by which the :nth-child configuration is altered to communicate a data relationship by grouping columns together visually (e.g., the first two columns might be blue and have a shared header, the next three are white with simple table data, and the last is yellow differentiating it somehow from the nearby white columns).
  • .compact - Lessens the font size and padding of table cells, allowing slightly more data to fit the space.
  • .sectioned - If multiple <tbody> tags are used, this class creates a visual gap between them. The practical use of this is to break a table into sections visually without needing to use multiple tables.

Examples

Basic Table (.table)
Col 1 Col 2 Col 3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 3 R3 C1 R3 C2 R3 C3
Bordered Table (.table.bordered)
Col 1 Col 2 Col 3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 3 R3 C1 R3 C2 R3 C3
Flat Table (.table.flat)
Col 1 Col 2 Col 3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 3 R3 C1 R3 C2 R3 C3
Striped Table (.table.striped)
Col 1 Col 2 Col 3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 3 R3 C1 R3 C2 R3 C3
Row 4 R4 C1 R4 C2 R4 C3
Row 5 R5 C1 R5 C2 R5 C3
Striped Table (.table.flat.striped)
Col 1 Col 2 Col 3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 3 R3 C1 R3 C2 R3 C3
Row 4 R4 C1 R4 C2 R4 C3
Row 5 R5 C1 R5 C2 R5 C3
Colored Table (.table.striped.colored)
Col 1 Col 2 Col 3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 3 R3 C1 R3 C2 R3 C3
Flat + Colored Table (.table.flat.striped.colored)
Col 1 Col 2 Col 3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 3 R3 C1 R3 C2 R3 C3
Rainbow Table. Come on, you know it's fun! (.table.striped.rainbow)
Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7
R1 C1 R1 C2 R1 C3 R1 C4 R1 C5 R1 C6 R1 C7
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5 R2 C6 R2 C7
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5 R3 C6 R3 C7
R4 C1 R4 C2 R4 C3 R4 C4 R4 C5 R4 C6 R4 C7
R5 C1 R5 C2 R5 C3 R5 C4 R5 C5 R5 C6 R5 C7
Flat Rainbow Table with Row Headers (.table.flat.striped.rainbow)
Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7
Row 1 R1 C1 R1 C2 R1 C3 R1 C4 R1 C5 R1 C6 R1 C7
Row 2 R2 C1 R2 C2 R2 C3 R2 C4 R2 C5 R2 C6 R2 C7
Row 3 R3 C1 R3 C2 R3 C3 R3 C4 R3 C5 R3 C6 R3 C7
Row 4 R4 C1 R4 C2 R4 C3 R4 C4 R4 C5 R4 C6 R4 C7
Row 5 R5 C1 R5 C2 R5 C3 R5 C4 R5 C5 R5 C6 R5 C7
Table with a <thead> and Multiple <tbody> Tags (add .sectioned to activate spacing)
Col 1 Col 2 Col 3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Row 1 R1 C1 R1 C2 R1 C3
Row 2 R2 C1 R2 C2 R2 C3
Back to Top

Columns and Grid System

You can apply a .two-col, .three-col, or .four-col class to most containers, to distribute their direct child nodes evenly in two, three, or four simple columns. This is the easiest way to render columns without the need for special HTML markup. Rows are maintained even when nodes are different heights (as seen in the Four Column example below).

Two Even Columns

Cornell Plantations Cornell Plantations

Three Even Columns

Cornell Plantations Cornell Plantations Cornell Plantations

Four Even Columns

Cornell Plantations Cornell Plantations Cornell Plantations Cornell Plantations Cornell Plantations Cornell Plantations Cornell Plantations Cornell Plantations

Two Columns (Padded)

Lorem ipsum dolor sit amet, amet eu hic, arcu at eros, odio sed vel ante morbi at aenean, eget leo donec turpis ligula. Felis vehicula, lacinia sed mauris, fusce accumsan adipiscing in id proin ullamcorper, enim ac arcu sed amet.
Lorem ipsum dolor sit amet, amet eu hic, arcu at eros, odio sed vel ante morbi at aenean, eget leo donec turpis ligula. Felis vehicula, lacinia sed mauris, fusce accumsan adipiscing in id proin ullamcorper, enim ac arcu sed amet.
Back to Top