Home » Courses

Styleguide

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

Welcome to the Custom Development Cornell CSS Framework. Below, you'll find a collection of sample content to demonstrate default layout, styling, and functionality. This same content can be used to test your custom designs, and to provide a reference for content contributors. You'll also find a few tips and guidelines along the way.

Heading Styles

Main Content Page Heading (Heading 1)

Primary Section Title (Heading 2)

Secondary Section Title (Heading 3)

Tertiary Section Title (Heading 4)

Subsection Title (Heading 5)

Subsection Title (Heading 6)

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

.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)

Images, Figures, Asides (`<img>`, `<figure>`, `<aside>`)

Graduating Seniors at Cornell Commencement 2013 — Wrap images in a `<figure>` tag to give them margined placement between block elements. An optional caption can be added using the `<figcaption>` tag.

Images may be placed within paragraphs or between them. One or more <img> tags may also be wrapped in a <figure> tag, and optionally accompanied by a <figcaption> tag. The W3C HTML5 Specification states that figure content should be self-contained, and able to be moved away from the main flow of the document without affecting the document's meaning. In other words, the figure is directly related to the article, but it is not dependent on a specific placement within the article. It can stand alone.

Most images used within an article fit the definition of figure content, especially if a caption is included. However, it may make sense to omit the figure tag in some cases, such as when an image's meaning is directly dependent on nearby text.

Alignment Options

Alignment classes can be applied to <img> or <figure> tags (and potentially other block elements within the main article). They will be sized fluidly, at up to 40% of container width. However, images will only be scaled down, not up. Small images will not be scaled up if their HTML width (e.g., <img src="bigredbear.gif width="100"> is less than 40% of the container. This allows for the use of different images sizes, without blurry upscaling or unnecessary waste of space. However, to take advantage of high-density phone and tablet displays, it is still recommended that small images be twice as large natively as their HTML width (i.e., the bigredbear.gif image above should be 200px natively, to display sharply at 100px).

Note: On small screen sizes, below 480px wide, images will try to fill the width of their container, regardless of alignment. For this reason, it is recommended that all content images have a native size that is no smaller than 480px. However, this behavior can be overridden using the .align-mobile class, demonstrated below.

Align Left `.align-left`

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. 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, fermentum aliquet lectus convallis at. 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. 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.

Align Right `.align-right`

Maintain Alignment on Mobile `.align-mobile`

Cornell Plantations — This tall image will maintain its 40% width and left alignment at all screen sizes.

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, fermentum aliquet lectus convallis at.

Multiple Images in One Figure

Use the .two-col, .three-col, or .four-col classes to instruct a <figure> tag to display images side-by-side. Add .margined to include a small margin between them. Take special care not to apply the .margarined class by mistake. This would result in an oily mess.

Vet Student with a Canine Associate — These images are part of a single `<figure>`, sharing the same `<figcaption>`. They are also free of margarine.

Vet Research Tower — These images are part of a single `<figure>`, sharing the same `<figcaption>`. They are also free of margarine.

Note: Most columned content will automatically become a single column at mobile sizes. However, sets of images inside a figure will maintain their column layout. The only exception is four-column sets, which will become two rows of two.

Weill Cornell Medical College — This `<figure>` is aligned left, so it should probably hold no more than two columns.

Weill Medical Student — This `<figure>` is aligned left, so it should probably hold no more than two columns.

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. 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, fermentum aliquet lectus convallis at. 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.

Cornell.edu Icons

Include fonts/cornell-custom.css to use Cornell.edu's custom icon font:

.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-logo
.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

Inline Styles

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

Hint: The "tutorial" accent color (green by default) is a customizable Sass variable in _cwd-variables.scss.

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 <span> tags, or to an HTML5 newcomer, the <mark> 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

A blockquote element has traditionally been used to display long quotations (including pull quotes from within the current document). However, the latest W3C HTML5 Specification refines this definition. The quote should be from another source (typically another web page), and optionally include the address of this source in a <cite> or <footer> tag (or both, as seen in the example below).

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.

4.4.4 The blockquote element - W3C Working Group, 2013

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.

Panels and Accent Options

Content can be wrapped in containers to create visual groupings, or to draw attention to special notes or messages. The CSS classes used below can be applied to regular <DIV> tags, or to specialized tags like <ASIDE>, <SECTION>, and possibly others. Aside tags should be used when the content fits the W3C HTML5 Specification (aside content should be secondary, but related to the nearby flow of information). Section tags can be used to wrap information that forms a thematic group (one which would be appropriate in a document outline). See the W3C HTML5 Specification and W3C Wiki for more information.

Note: Keep accessibility in mind when deciding to group content with DIVs. The content will only be grouped visually. To a screen-reader, it will appear like any other content in the flow of the document. This may be desirable, if the visual grouping does not communicate essential document structure. However, you could add an ARIA role to the DIV (e.g., <div class="panel" role="alert" aria-label="User Warning">) to define its function. Or, if appropriate, use an <ASIDE> or <SECTION> tag to take advantage of their implied roles.

Note: The .panel class name is also used by Bootstrap. The options below should be compatible, but keep an eye out for anything unexpected! These options were not built on Bootstrap's implementation.

Panels

Hint: All options below can be mixed and matched.

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")

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

List Item
List Item
List Item

List Item
List Item
List Item

List Item
List Item
List Item

List Item
List Item
List Item

List Item
List Item
List Item

List Item
List Item
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 <LI> 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 <LI> 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 <LI> 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!)

Hint: Every icon has a different visual weight and line-height. To choose a different glyph and adjust its properties, add and customize any of the following in your project CSS:

ul.custom > li:before, ul.custom.recursive ul > li:before {
   content: '\f0da';
   font-size: inherit;
   line-height: inherit;
   color: #000;
   opacity: 0.5;
   top: 0;
   left: 2px;
}

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`)

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

Recursive (`ol.custom.recursive`)

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

Large (`ol.custom.large`)

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

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`)

Hint: .list-menu classes can be used on either unordered or ordered lists with the same result. Use whichever tag best fits the content semantically.

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.

Note: Accessible data tables should include <caption> tags and properly identified and scoped headers for columns and rows (e.g., <th scope="col">). Some styles also expect the scope attribute to be present, and may not work without it.

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 Nested Column and Row Headings
		Col 1	Col 2
		Col 1	Col 2a	Col 2b
Row 1	Row 1a	R1a C1	R1a C2a	R1a C2b
Row 1	Row 1b	R1b C1	R1b C2a	R1b C2b
Row 2		R2 C1	R2 C2a	R2 C2b

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

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)

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.

Flexbox Grid (`.flex-grid`)

The 12-column flexbox-based grid is also available for use.

Container Classes

In many of the example below, the .demo class is used only to color-tint nodes for easier viewing and testing, and should be removed once grids are configured.

Basic Column Grids

3/12

9/12

2/12

8/12

2/12

1/5

1/8

2/12

Nested

3/12

6/12 Nested

12/12 Nested

Collapse Rows

.flex-2

.flex-7

.flex-3

.flex-5

.flex-1

.flex-4

Collapse Rows and Padded

.flex-2

.flex-7

.flex-3

.flex-5

.flex-1

.flex-4

Collapse Rows and Columns

.flex-2

.flex-7

.flex-3

.flex-5

.flex-1

.flex-4

Grid with `<hr>` Dividers

.flex-3

.flex-4

Grid with Panels

.flex-3

Styleguide

Heading Styles

Main Content Page Heading (Heading 1)

Primary Section Title (Heading 2)

Secondary Section Title (Heading 3)

Tertiary Section Title (Heading 4)

Subsection Title (Heading 5)

Subsection Title (Heading 6)

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)

Images, Figures, Asides (<img>, <figure>, <aside>)

Alignment Options

Align Left .align-left

Align Right .align-right

Maintain Alignment on Mobile .align-mobile

Multiple Images in One Figure

Cornell.edu Icons

Inline Styles

Text Highlights

Blockquote

Standard Blockquote

Impact Blockquote

Offset Blockquote

Panels and Accent Options

Panels

Fill Background

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

Indenting

Lists

Unordered List

Ordered Lists

Custom Unordered List

Simple (ul.custom)

Recursive (ul.custom.recursive)

Chevrons (ul.custom.chevrons)

Success Checkmarks (ul.custom.success)

Failure X's (ul.custom.failure)

Failure Warnings (ul.custom.warning)

Notifications (ul.custom.notifications)

Status Message (ul.custom.status)

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

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

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

Nerdy List (ul.custom.nerd)

Custom Ordered List

Simple (ol.custom)

Recursive (ol.custom.recursive)

Large (ol.custom.large)

Lists as Menus

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)

Tables

CSS Class Options TABLE.class

Examples

Columns and Grid System

Two Even Columns

Three Even Columns

Four Even Columns

Two Columns (Padded)

Images, Figures, Asides (`<img>`, `<figure>`, `<aside>`)

Align Left `.align-left`

Align Right `.align-right`

Maintain Alignment on Mobile `.align-mobile`

Simple (`ul.custom`)

Recursive (`ul.custom.recursive`)

Chevrons (`ul.custom.chevrons`)

Success Checkmarks (`ul.custom.success`)

Failure X's (`ul.custom.failure`)

Failure Warnings (`ul.custom.warning`)

Notifications (`ul.custom.notifications`)

Status Message (`ul.custom.status`)

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

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

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

Nerdy List (`ul.custom.nerd`)

Simple (`ol.custom`)

Recursive (`ol.custom.recursive`)

Large (`ol.custom.large`)

List Menu (`ul.list-menu`)

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

List Menu (`ul.list-menu.divs`)

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

List Menu (`ul.list-menu.links`)

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

CSS Class Options `TABLE.class`

Flexbox Grid (`.flex-grid`)

Grid with `<hr>` Dividers