Placeholder
Emory University Emory Libraries
Back to menu

Page Elements: Content Styles

Emory Libraries website heading hierarchies, text and list styles, and table examples

Headings

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.  These different heading levels help to communicate the organization and hierarchy of the content on a page. 

Avoid skipping levels when using headers on your page. <h1> is used for page titles, <h2> for main content sections, and so on.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 XL

Heading Hero Title

Heading 2 Yellow Label

Pre heading

Heading 4 Accent

Heading 5 Alternate

Text styles: paragraphs, blockquotes, links, etc.

A text style is a named collection of text settings that controls the appearance of text, such as font, line spacing, justification, and color.

This is an example of paragraph xl.

This is an example of paragraph blockquote.

 

If you do not apply any style, this is what you will get for paragraph text.

Example of paragraph accent style, that has slightly more padding so that it stands out.

This is an example of the paragraph button text style.

This is an example of text label style, used within card components and sidebars.

This is an example of paragraph small.

This is an example of the text data style. 

This is an example of link text.

This is an example of paragraph large style.

This is an example of paragraph alternate style. There is padding built in above and below this one.

 

This is an example of paragraph lead. It is used for page descriptions underneath the page title.

An example of a blockquote (instead of text). You get the attribution fields below and a left border.
Placeholder Name Occupation / Organization

You can also select "blockquote small style" in a text component instead of a blockquote component, thus avoiding the attribution fields above. 

List styles

This is an example of an unordered, or bulleted, list:

  • Point 1
  • Point 2
  • Point 3

This is an example of an ordered, or numbered, list:

  1. Example a
  2. Example b
  3. Example c

Table Examples

This is an example of a table with column headings only and no border.

Person 1 Person 2 Person 3
Emil Tobias Linus
16 14 10

This is an example of a table with both column and row headings and a border.

  Pet 1 Pet 2 Pet 3 Pet 4
Species Dog Cat Frog Imaginary Friend
Name Judge Norbert Trotsky Anne of Green Gables
Favorite Food hamburgers plastic coffee cherry cordial