Skip to main content

Subheader

This section can be used for additional branding, navigation or other information between the header and main content. One example use is breadbrumbs:

Priority Sidebar Content

This content will appear above the main page content on mobile devices. Used for section navigation, contextual search, or other important elements.

Basic Flat Menu

WordPress Menu

Drupal Menu

Main Content Page Heading (Heading 1)

Welcome to the CWD 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.

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.

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

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

Homecoming Bear Hug! — Free Hugs!

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`

Vet Student with a Feline Associate

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

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

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.

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:

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

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

Preformatted Text

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

More Styled Elements

ABBR Abbreviation (or acronym), the definition of which should appear in a title attribute.
Strong In recent revisions of the W3C HTML5 Specification, bold tags (<b>) have made a comeback. In comparison, <strong> is for "a span of text with strong importance", while <b> is for text "offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text". When deciding which to use, stick with strong unless the text is not meant to have any special impact, and is only bold as a literary convention. (This distinction is somewhat subjective, so don't sweat it too much! Practically speaking, either is fine.)
Emphasis Like the strong/bold comparison above, recent revisions of the W3C HTML5 Specification have given semantic meaning to italic tags (<i>). <em> is for "a span of text with emphatic stress", while <i> is for text "offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text". When deciding which to use, stick with em unless text is not meant to stand out, and is only italic as a literary convention.
Cite A cited title of a work, typically used inside a <blockquote>, but also valid anywhere in the flow of a document.
Code Fragment Used extensively in this document to call out HTML markup, CSS classes, and other code samples. For larger pieces of code, with multiple lines and indenting, consider the <pre> (preformatted text) tag instead.
^Superscript and _Subscript Archnemeses who are more alike than they will ever admit.
Read more

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.

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

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

Lists in the CSS Framework use SVG vector bullets, to standardize appearance across modern browsers and platforms, with PNG fallback for old browsers.

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

Table of Contents (`ul.toc`)

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

Lists as Menus

The .list-menu system quickly removes bullets and adjusts the layout of list items to fit many common use-cases. This system is also used as the foundation for the section navigation appearing in the Priority Sidebar above.

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

Accessible data tables should include <caption> tags and properly identified and scoped headers for columns and rows (e.g., <th scope="col">).

Basic Table
	Column 1	Column 2	Column 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

Table with Nested Column and Row Headings
		Column 1	Column 2
		Column 1	Column 2a	Column 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 `<thead>` and Multiple `<tbody>` Tags (apply `.sectioned` class to activate spacing)
	Column 1	Column 2	Column 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

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

Responsive Grids

For complex layouts, a 12-column grid system can be defined in the basic style of popular frameworks like Bootstrap and Foundation. However, this comes at the expense of requiring additional HTML markup and non-semantic CSS classes. It also requires that grids be planned and tested for up to three different screen sizes: .small-, .medium- (≥768px), and .large- (≥1024px) (and taking into account that the CWD CSS Framework is a fluid design). The media queries are mobile first, so "small" grid settings are inherited at medium and large screen sizes, unless overridden. By default, grid columns will display at 100% width (12 units) if no .small- class is included. With this in mind, you can create a simple responsive element, with minimal fuss, by defining only .medium- grid settings. This will result in a useful grid layout on most tablet and desktop screens, and a single column stacked layout on small tablets and phones.

Internet Explorer 8: Since media queries are required to adjust grids sizes, Internet Explorer 8 and older will not be able to display distinct .small-, .medium-, and .large- grid definitions. To work around this limitation, the ie8.css stylesheet includes a non-queried copy of the medium and large classes. The result is that IE8 will always use the largest grid defined, regardless of screen size. If full IE 8 grid support is critical, you could try disabling this workaround and implementing Respond.js (this method is untested).

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

Column Grids

3/12

9/12

2/12

8/12

2/12

1/5

1/5

1/5

1/5

1/5

1/8

1/8

1/8

1/8

1/8

1/8

1/8

1/8

2/12

2/12

2/12
break test

2/12

2/12

2/12

2/12

2/12

2/12

2/12

2/12

2/12

Nested

3/12

6/12 Nested

6/12 Nested

12/12 Nested

Collapsed Padding

3/12

1/5

1/5

1/5

1/5

1/5

Margined

3/12

1/5

1/5

1/5

1/5

1/5

12/12

Margined with Panels

3/12

1/5

1/5

1/5

1/5

1/5

12/12

Use Case

Big Red Bear

Touchdown

Ursus grandis rubens

Touchdown, or the Big Red Bear, is the unofficial mascot of Cornell University.

Known Associates:

Ezra Cornell

A.D. White

Pooh Bear

Forms

Article Footer

This content appears at the bottom of the main article. It could hold footnotes, references, author info, or other metadata.

Secondary Sidebar Content

This content will appear below the main page content on mobile devices. Used for related links, site-wide features, or other elements that are not the main focus of the page.

Homecoming Bear Hug! — Free Hugs!

The Big Red Bear socializes with his adoring fans.

Donec venenatis arcu eget arcu ultricies pretium. Sed dignissim mi vel est lobortis hendrerit. Nam consectetur suscipit consectetur. Pellentesque non libero lacus, nec porttitor neque. Donec nunc libero, vehicula a mollis in, fermentum id mauris. Morbi tincidunt dictum eleifend. Ut in molestie metus. Phasellus imperdiet, libero et tempor eleifend, eros sem fermentum orci, ut egestas dui nunc nec lacus. In hac habitasse platea dictumst.

Content Band (.accent1)

Paragraph content nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.

Content Band (.accent2)

Paragraph content nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.

Content Band (.accent3)

Paragraph content nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.

Content Band (.accent4)

Paragraph content nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.

Content Band (.accent5)

Paragraph content nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.

Content Band (.accent6)

Paragraph content nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.

Nested Content Bands (.band > .band + .container > .band)

Nested band content with .accent5 aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Paragraph content nullam quis risus eget urna mollis ornare vel eu leo.