Tablists .ui-tabs

Accordions (<details>)

An optional .animate class can be included on a direct child container of the <details> tag. This container will fade in when opened. If the class .slide-down is also included, the animation will include a subtle sliding effect. The slide-down option is used in the Expanding Menu examples below.

Wrapping multiple <details> tags in an .accordion-set container will cause JavaScript to generate an "expand all" button for this set of accordions. When opening all accordions with this button, any animations will be omitted.

Multiple <details> tags that share a name attribute will act as a single-select group (only one accordion in the group can be open at a time, with others closing automatically if a new one is opened).

• While this behavior is part of the <details> tag specification, it is fairly new as of 2024, and may not yet be supported natively by all browsers. To ensure consistent functionality on all browsers, it has been implemented with custom JavaScript instead.
• Single-select groups are fundamentally compatible with "expand all" functionality, but it is recommended that you only use this combination with caution, as the UX may be a bit at odds with itself. Depending on the accordion style chosen, it may also be worth considering whether animated reveals are helpful or a hinderance to the visual communication of single-select behavior.

Default Style

Compact Style .compact (can also be used on the .accordion-set container)

Classic Style .classic (can also be used on the .accordion-set container)

Simple Style .simple (can also be used on the .accordion-set container)

Expanding Menu .menu (add .mobile-only to only apply to mobile sizes)

When open, the accordion will be tinted for visual separation, but the utility class .no-background can override this for a cleaner look.

Single-Select (sharing the same name attribute)

While single-select groups are fundamentally compatible with "expand all" functionality, it is recommended that you only use this combination with caution, as the UX may be a bit at odds with itself. Depending on the accordion style chosen, it may also be worth considering whether animated reveals are helpful or a hinderance to the visual communication of single-select behavior.

If nested accordions appear within a single-select group, the nested accordions should not include the name attribute. Otherwise, they might close their own parent when opened!

Modal Dialog (<dialog.ui-modal>)

@TODO [aria-modal="true"]

Unsubscribe from all

Styleguide

This is the .intro paragraph style, used 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 paragraph demonstrates how basic text content and links will adapt to light and .dark backgrounds, in various colors of the Cornell palette.

Heading Styles

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

Teal .accent1

Blue .accent2

Purple .accent3

Gold .accent4

Green .accent5

Invisible .invisible (no visible line, spacer only)

Dotted .dotted

Dashed .dashed

Double .double

Heavy .heavy (can be paired with any accent above except "double")

Extra-Heavy .extra-heavy (can be paired with any accent above except "double")

Faded .fade (can be paired with any style)

Flourish .flourish (replace with your own vector logo or seal, default seal requires SVG support)

Cornell Icon .bigred (requires SVG support)

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

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

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

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.

Maintain Alignment on Mobile .align-mobile

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.

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.

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

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.

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.

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

Hint: By default, blockquotes will not automatically display quotation marks. They can be typed in manually, but another option is to use the <q> tag:

The content of this paragraph is also wrapped within a <q> tag. In addition to rendering quotation marks, you'll notice that the opening quote is offset to the left, allowing the first line of text to cleanly align with additional lines below it. Lines aligned!

Impact Blockquote .impact

This option displays text at a larger size and in a contrasting font. It is best used for short quotes.

Some have called Cornell the “first American university.”

Offset Blockquote .offset

Like the impact blockquote, this option displays text at a larger size and in a contrasting font. It also floats the blockquote to one side, and extends into the side margin for extra visual contrast. The .offset and .impact options look the same on small screens. The offset will only occur on larger screens with side margins to accomodate it.

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.

Note: This option is compatible with .sidebar-left, but is better suited to .sidebar-right or full-width content.

Preformatted Text <pre>, <xmp>, <plaintext>, <listing>

pre {
        padding: 1em 2em;
        background: hotpink;
    }

More Styled Elements

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.

Panels

Hint: All options below can be mixed and matched. Use the .no-border class to omit the default 1px border, or .no-background for a transparent background.

Light Colors

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

Indenting

Padding, Border, Background, Shadow

Pills .pill

The Panels system, particularly its accent colors, can also be used for "pills," which are compact versions intended for small fragments of text. A common use for pills is to visualize metadata (tags, categories, etc...), making them easier to recognize. Pills use the class .pill instead of .panel, and can be used on <DIV> or <SPAN> tags as appropriate. They can also be interactive elements, as <A>, <BUTTON>, or <SPAN role="button"> tags.

Default Gray Pure White Teal Blue Purple Gold Green Red

Light Gray Light Teal Light Blue Light Purple Light Gold Light Green Light Red

Default Teal Blue Purple Gold Green Red

Link Link, No-Deco Button Button Role Teal Button Blue Button Purple Button Gold Button Green Button Red Button

Lists

Unordered List

Ordered Lists

Numbering options for ordered lists can be defined with the traditional type attribute, or via CSS classes. Some options, like Decimal with Leading Zero are only available via CSS. For fonts like Freight Sans, with non-lining numerals, the lnum utility class can be used for cleaner alignment. Big Red Bear in mind, however, that this will also apply to content within the list item.

Definition List

Definition Term One

Definition ipsum dolor sit amet.

Definition Term Two

Definition morbi aliquam ut fermentum lacus.

Third Definition Term

Definition sagittis dui porttitor vitae.

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 ■ (red square). A few other example are provided below, using glyphs from an icon font (FontAwesome or Material Design Iconic) or from emoji.

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

Inline (ul.custom.inline)

• List item ipsum dolor sit amet
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item

No Bullet (ul.custom.no-bullet)

• List Item in Stealth Mode
• List Item in Stealth Mode

Chevrons (ul.custom.chevrons)

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

Cornell.edu-style (ul.custom.cu or ul.cu-list)

Smaller red squares with top-level indenting, in the style of Cornell's main site. This list style is automatically recursive.

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

A typical CU list with compact, medium-weight links, and no text-decoration:

• Board of Trustees
• Office of the President
• Office of the Provost
• Diversity & Inclusion
• Faculty Senate

Nerdy List (ul.custom.nerd)

Emoji can be used as well, as seen in the example below. Just remember that artwork for emoji characters varies across different operating systems.

• 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

Inline (ol.custom.inline)

1. List item ipsum dolor sit amet
2. List Item
3. List Item
4. List Item
5. List Item
6. List Item
7. List Item
8. List Item
9. 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.

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

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

Columns with Padding (.padded)

Add a .padded class to any of the above options to include a gap (gutter) between columns.

Flexbox Grid (.flex-grid)

A 12-column flexbox-based grid is also available for more advanced layouts. Applying the .flex-grid class to a container will activate flexbox behavior and unlock column sizes of 1 to 12 for direct children (.flex-*). For example, a .flex-3 class applies a width of 25% (3/12) to the grid item, while .flex-4 applies a width of ~33.3% (4/12).

Notes/Behaviors

• Grid items will display in a single column on mobile. To better accomodate a wide range of layouts (especially forms), the breakpoint at which the .flex-grid activates is 834px. Note that this is higher than the more common 768px used by other responsive layouts in the CSS Framework. Additionally, .flex-grid layouts inside a <form> tag will not activate until 1024px since form elements are more sensitive to space contraints.
• For modern browsers, a container query is used to apply an additional constraint, allowing the grid to activate sooner in full-width regions and later in smaller regions (such as when a sidebar is present).
• A .flex-12 class is not needed to apply 100% width. Grid items will display at 100% width by default.
• In addition to sizes of .flex-1 through .flex-11, two specialty sizes are available: .flex-1-5 (20%) and .flex-1-8 (12.5%).
• Grid items will drop to the next row if there isn't enough room for the width specified, leaving an empty space. In general, the math of each row should always add up to 12 (100%).
• Horizontal Rules (<hr>) can be used as dividers between rows (an example is below).

Container Classes

• .padded - Child elements have horizontal (left and right) padding by default. This class applies vertical padding to match.
• .collapse-rows - This class removes the vertical margin between rows.
• .compact-rows - This class greatly reduces the vertical margin between rows.
• .collapse-cols - This class removes the horizontal padding (effectively the margin) between child elements.

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

Basic Column Grids

Nested

Collapse Rows

Compact Rows

Collapse Rows and Padded

Collapse Rows and Columns

Grid with <hr> Dividers

Grid with Panels

Forms

The .flex-grid also works well for forms, but it's important to be mindful of label and description lengths, to ensure they will fit the space provided at all screen sizes. More information is available on the forms documentation page.

Custom Forms

Basic Form Styles and Layout

Basic Forms (no class needed). Standardized around single column with label on top. flexbox system for .form-item divs being side-by side on larger screens. form.compact option will use smaller labels and description text. However, field inputs will remain at 16px at phone size, to ensure that they do not zoom on iPhones. By default, form fields and their associate labels and descriptions will fill all available width. form.no-constrain option lifts this limit limits these elements to 600px maximum width, which may be desirable in some cases where fields being wider than this will begin to lose their "field" appearance to the visitor's eyes.

Fieldset classes: .semantic (affects visual of fieldset and any legend within). Form-item and form-actions, class option: .form-item.tint, .description, .option-label for checkboxes and radios (put it after the checkbox and before the radio (but that doesn't seem right?), label + input + div.description pattern, .use-size-attr option

Flexbox system (include div.flex-grid as container for form-items and form-actions). By default, it won't change anything unless the form-items have classes added for a 12-column grid (.flex-1, flex-2, flex-3, etc up to .flex-12 (which is the default 100%)). Since it's not feasible to predict the ideal way to break the grid down in stages, the grid will simply drop to single column at subtablet size. Note: If using a grid layout, especially one with small units, there won't be space for long labels or description text for each field. Fields should generally only be displayed side-by-side if they have a strong thematic link (such as segments of a phone number) so that a single description can apply to the set. It's also probably best not to use a unit below 3.

Forms use the standard flex-grid system except that the switch to single column happens sooner (

If you want to provide a thematic break between fields or groups of fields, you can use an HR tag between .form-item divs (or .form-actions). This will also work inside of a flex-grid.

Fieldsets

The <fieldset> tag can be used to group fields which are thematically related. By default, the relationship is also represented visually, as seen throughout this page. Fieldsets must include a <legend> tag, which acts as a caption to describe the fields' relationship. More details on fieldset legends can be found below.

Default

Semantic (.semantic)

Fieldset Legends

Legends act as captions for a fieldset, helping to describe the thematic grouping of fields. In general, only one <legend> tag should appear in a <fieldset>. Multiple legends can be rendered. However, only the first will be treated as the primary caption.

Visually Hidden

While legends are optional in HTML5, they are required for WCAG 2.0 compliance. If a legend is not needed visually, use the .sr-only class to make it exclusive to screen readers. Combining this with a .semantic fieldset will allow you to use fieldsets with no visual representation, which is appropriate in many cases.

Nested Fieldsets

Nested fieldsets are supported but should be avoided if possible for easier accessibility. It may be a valid approach in some cases, however, such as organizing exceptionally complex forms.

Tips for Nerds

Form Inputs

Inputs, Textareas, and Selects (along with their labels and description boxes) will generally fill the width of their container by default, but with a maximum width of 600px. This 600px limit can be bypassed by including a .no-constrain class on the <form> tag. Use the .native-size class on an individual input (or a whole <form>) to override fluid sizing entirely and honor HTML-defined size attributes. This should be used with caution, since attributes like size and cols can override max-width constraints.

Basic Text

Specialty Text

By default, specialty text fields mimic the look and behavior of basic text fields. However, the optional .icon class on an input will add a thematic background icon.

Functional Inputs

The functionality of these input types is browser/device-specific. In many cases, they have no special functionality at all (but may in the future). In general, when a browser does not support special functionality for these fields, it will behave as a standard text field. However, in some cases, a field may not be supported at all (e.g., at the time of this writing, iOS has trouble with the Week input). To minimize compatibility issues, functional inputs are styled a bit more lightly than other text inputs. They will be roughly the same size, but will allow more device-specific design to come through. These esoteric fields should be used with care (and testing!).

Checkboxes

Notes about browser considerations and use of .option-label/.description/.form-item, checkboxes are toggled on and off independently, multiple checkboxes grouped in a set can be selected, radio buttons are grouped into a set in which only one can be selected at a time

Radio Buttons

Notes about browser considerations and use of .option-label/.description/.form-item, checkboxes are toggled on and off independently, multiple checkboxes grouped in a set can be selected, radio buttons are grouped into a set in which only one can be selected at a time

Select Lists

...

Flexbox Grid

Example Forms