Styleguide

This is the .intro paragraph style to give extra impact to an opening sentence or two. It can serve as a tagline or short prompt for the content that follows.

This page was created using the default WordPress editor. As a content contributor, all of the styles below are available directly in the editor. Use the Paragraph dropdown menu to style headings. Use the Formats dropdown menu to apply styles elsewhere. Some styles will require you to manually add a class using the Text tab of the editor.

Heading Styles

Note: Heading levels for a basic page should start at Heading 2, since Heading 1 is reserved for the page title. The WordPress editor’s Paragraph menu will also reflect this.

Back to Top

Horizontal Rules

Note: The latest W3C HTML5 Specification changes the semantic definition of the <HR> tag, to represent a “thematic break,” rather than a traditional stylistic divider. However, we expect that most content contributors will continue to use them in their traditional way, so the following options are provided:

Default

Blue-Green

Blue

Purple

Gold

Green

Invisible (no visible line, spacer only)

Dotted

Dashed

Double

Heavy

Extra-Heavy

Faded

Flourish

Cornell Icon

Section Break (section divider with extra spacing)

Back to Top

Images, Figures, Asides

Images may be placed within paragraphs of text, or placed in-between paragraphs, centered or floated, with or without a caption.

Alignment Options

Use the Add Media button to place images within the content of the page. When choosing an image from the media library (or uploading a new image), you will have the option to float them to the left or right of surrounding text. Floated images will be sized fluidly, at up to 40% of content width. However, images will only be scaled down, not up. Small images will not be scaled up if their natural width is less than 40% of the container. This allows for the use of different images sizes, without blurry upscaling or unnecessary waste of space.

Align Left

Floated images larger than 40% of the content area can be scaled down or cropped. When inserting an image, you can choose from four set image sizes or choose a custom size. The following left-aligned image is full size (scaled down). Any image size you choose other than full size will require cropping. Ut id nisl quis enim dignissim sagittis. Phasellus nec sem in justo pellentesque facilisis. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus quis mi. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Praesent ut ligula non mi varius sagittis. Praesent adipiscing. Etiam rhoncus. Phasellus nec sem in justo pellentesque facilisis. Aenean ut eros et nisl sagittis vestibulum. Praesent turpis. Morbi nec metus. Morbi ac felis. Suspendisse eu ligula. Phasellus tempus. Curabitur blandit mollis lacus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Nullam sagittis.

Align Right

The following right-aligned image is not full size. Instead, it uses one of the preset image sizes: large (cropped). Morbi nec metus. Aliquam erat volutpat. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Phasellus nec sem in justo pellentesque facilisis. Morbi ac felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Sed fringilla mauris sit amet nibh. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Fusce fermentum odio nec arcu. Mauris sollicitudin fermentum libero. Praesent ac sem eget est egestas volutpat. Phasellus magna. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Pellentesque auctor neque nec urna. In auctor lobortis lacus. Quisque rutrum. Duis lobortis massa imperdiet quam.

Align Center

Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Nullam accumsan lorem in dui. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Phasellus magna. Praesent blandit laoreet nibh. Praesent adipiscing. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Maecenas nec odio et ante tincidunt tempus. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Pellentesque ut neque. Nunc nec neque. Duis leo. In ut quam vitae odio lacinia tincidunt. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Suspendisse feugiat. Nullam accumsan lorem in dui. Aliquam erat volutpat. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Nam pretium turpis et arcu. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Nulla consequat massa quis enim. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.

Aside

Ut id nisl quis enim dignissim sagittis. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Vestibulum dapibus nunc ac augue. Phasellus accumsan cursus velit. In auctor lobortis lacus. Sed a libero. Suspendisse feugiat. Proin faucibus arcu quis ante. Cras sagittis. Fusce fermentum odio nec arcu. Fusce convallis metus id felis luctus adipiscing. Quisque id odio.

Aside right

In ac dui quis mi consectetuer lacinia. Nunc sed turpis. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Curabitur at lacus ac velit ornare lobortis. Curabitur at lacus ac velit ornare lobortis. Mauris sollicitudin fermentum libero. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Etiam iaculis nunc ac metus. Nam eget dui. Nulla porta dolor. In ac felis quis tortor malesuada pretium. Vivamus consectetuer hendrerit lacus. Praesent vestibulum dapibus nibh. Phasellus ullamcorper ipsum rutrum nunc. Ut leo. Vestibulum eu odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nec neque.

Aside column

Donec posuere vulputate arcu. Vivamus elementum semper nisi. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam tincidunt adipiscing enim. Ut a nisl id ante tempus hendrerit. Praesent ac massa at ligula laoreet iaculis. Fusce pharetra convallis urna. In hac habitasse platea dictumst. Donec vitae sapien ut libero venenatis faucibus. Fusce vel dui. Maecenas vestibulum mollis diam. Vivamus quis mi. Vivamus laoreet. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Sed libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Praesent egestas neque eu enim. Maecenas malesuada. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Back to Top

Inline Styles

Sed libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Praesent egestas neque eu enim. Maecenas malesuada. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.

Text Highlights

Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Suspendisse feugiat. Etiam ultricies nisi vel augue. Praesent nonummy mi in odio. Quisque id odio. Phasellus nec sem in justo pellentesque facilisis. Suspendisse feugiat. Pellentesque commodo eros a enim. Aenean vulputate eleifend tellus. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec vitae orci sed dolor rutrum auctor. Praesent blandit laoreet nibh. Phasellus blandit leo ut odio. Fusce commodo aliquam arcu. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nullam vel sem. Quisque ut nisi. Vestibulum eu odio. Fusce egestas elit eget lorem. Fusce vel dui. Fusce convallis metus id felis luctus adipiscing. Vivamus laoreet. Aenean vulputate eleifend tellus. Phasellus consectetuer vestibulum elit. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Sed hendrerit. Sed a libero. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Suspendisse eu ligula. Back to Top

Blockquotes

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Suspendisse feugiat. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nam adipiscing. Etiam ut purus mattis mauris sodales aliquam. Vestibulum dapibus nunc ac augue. Phasellus accumsan cursus velit. In auctor lobortis lacus. Sed a libero. Suspendisse feugiat.

Impact

Morbi vestibulum volutpat enim. Praesent venenatis metus at tortor pulvinar varius. Praesent venenatis metus at tortor pulvinar varius. Praesent ut ligula non mi varius sagittis.

Some have called Cornell the “first American university.

Morbi vestibulum volutpat enim. Praesent venenatis metus at tortor pulvinar varius. Praesent venenatis metus at tortor pulvinar varius. Praesent ut ligula non mi varius sagittis. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus consectetuer hendrerit lacus. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Ut id nisl quis enim dignissim sagittis. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vestibulum dapibus nunc ac augue. Phasellus accumsan cursus velit. In auctor lobortis lacus. Sed a libero. Suspendisse feugiat.

Offset

Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Aliquam lobortis. Quisque rutrum. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Sed in libero ut nibh placerat accumsan.

Some have called Cornell the “first American university.”

Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Morbi nec metus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Cras dapibus. Fusce fermentum odio nec arcu. Cras dapibus. Aenean vulputate eleifend tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur a felis in nunc fringilla tristique. Praesent ac sem eget est egestas volutpat. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus consectetuer hendrerit lacus. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Ut id nisl quis enim dignissim sagittis. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Suspendisse feugiat. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nam adipiscing. Etiam ut purus mattis mauris sodales aliquam. Back to Top

Panels and Accent Options

Panels

Fill Background

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

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

Indenting

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

• Introduction
• Section One Title
• Section Two Title
• Section Three Title
• Section Four Title

Ordered Lists

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)

• Academics
• Admissions
• Teaching & Research
• News & Events
• Contact

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

• Academics
• Admissions
• Teaching & Research
• News & Events
• Contact

With Dividers

List Menu (ul.list-menu.divs)

• Academics
• Admissions
• Teaching & Research
• News & Events
• Contact

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

• Academics
• Admissions
• Teaching & Research
• News & Events
• Contact

With Button Links

List Menu (ul.list-menu.links)

• Academics
• Admissions
• Teaching & Research
• News & Events
• Contact

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

• Academics
• Admissions
• Teaching & Research
• News & Events
• Contact

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

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

Three Even Columns

Four Even Columns

Two Columns (Padded)

Back to Top