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 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.
Quote from Placeholder Name
An example of a blockquote (instead of text). You get the attribution fields below and a left border.
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:
- Example a
- Example b
- 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 |