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.
Page Contents
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.
Primary Section Title (Heading 2)
Basic paragraph text for comparison lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero.
Secondary Section Title (Heading 3)
Basic paragraph text for comparison lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero.
Tertiary Section Title (Heading 4)
Basic paragraph text for comparison lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero.
Subsection Title (Heading 5)
Basic paragraph text for comparison lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero.
Subsection Title (Heading 6)
Basic paragraph text for comparison lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero.
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)
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
class="panel"
)class="panel accent-blue-green"
)class="panel accent-blue"
)class="panel accent-purple"
)class="panel accent-gold"
)class="panel accent-green"
)class="panel accent-red"
)Fill Background
Hint: Use the .no-border
class to omit the default 1px border.
class="panel fill"
)class="panel accent-blue-green fill"
)class="panel accent-blue fill"
)class="panel accent-purple fill"
)class="panel accent-gold fill"
)class="panel accent-green fill"
)class="panel accent-red fill"
)Heavy Border (left or top, with or without fills)
class="panel fill heavy-left"
)class="panel accent-blue-green heavy-left"
)class="panel accent-blue fill heavy-left"
)class="panel accent-purple heavy-top"
)class="panel accent-gold fill heavy-top"
)class="panel accent-green heavy-top"
)class="panel accent-red fill heavy-top"
)Indenting
class="panel indent1"
)class="panel indent2"
)class="panel indent3"
)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:
- Nested List Item
- Nested Unordered List Item
- Nested Unordered List Item
- Nested List Item
- 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:
- Nested List Item
- Nested Unordered List Item
- Nested Unordered List Item
- Nested List Item
- 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:
- Nested List Item
- Nested Unordered List Item
- Nested Unordered List Item
- Nested List Item
- 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
)
- 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
- Nested Ordered List Item
- Nested Ordered List Item
- Nested 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
- Nested Ordered List Item
- Nested Ordered List Item
- Nested 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
With Dividers
With Button Links
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
Examples
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Col 1 | Col 2 | |||
---|---|---|---|---|
Col 2a | Col 2b | |||
Row 1 | Row 1a | R1a C1 | R1a C2a | R1a C2b |
Row 1b | R1b C1 | R1b C2a | R1b C2b | |
Row 2 | R2 C1 | R2 C2a | R2 C2b |
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).