Carnegie Mellon University

CMS Demo Site

Resource for v5 Design

Styles

Below are examples of the styles available in v5.

Subhead or Long Description of the Following Content (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur (paragraph).

The following line is a horizontal rule. It can be used to separate sections of content on a page.


Headline, Page Title, or Short Description of the Following Content (h1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat (paragraph).

Short Description of Subsection (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua (paragraph).

Short Description of Another Subsection (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat (paragraph).


Headline or Page Title (h1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat (paragraph).

Title of Subsection (h2)

Subsection of Subsection (h3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua (paragraph).

Another Subsection of Subsection (h3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua (paragraph).

Text

Align Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Align Right

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Rule Top

Adds a rule above text.

Rule Bottom

Add a rule below text.

Images

Float Left

CampoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Float Right

CampoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Circle

Campo

Captions

Float Left Caption

CampoCaption goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Float Right Caption

CampoCaption goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tables

Tables are meant to display tabular data. By default, tables have a gray border. Remove the border by applying the "noborder" style.

You may also style a table to have alternating rows with a gray background. Apply the style "alt" to the table.

Standard Table

Column 1 HeadingColumn 2 Heading
Column 1, Row 1 Column 2, Row 1
Column 1, Row 2 Column 2, Row 2

Tabler with No Border

Column 1 HeadingColumn 2 Heading
Column 1, Row 1 Column 2, Row 1
Column 1, Row 2 Column 2, Row 2

Table with Alternate Rows

Column 1 HeadingColumn 2 Heading
Column 1, Row 1 Column 2, Row 1
Column 1, Row 2 Column 2, Row 2
Column 1, Row 3 Column 2, Row 3

Colors

Grids, slideshows, and sidebars can be shown in one of nine colors.

White/Simple

CMU Red

Gray

Dark Gray

Gold

Teal

Blue

Green

Dark Green

Grids

Grids can also have one of two background images:

  1. globe
  2. plaid