Table of Contents
Typography
Headings
Headings can be very helpful to break up content and orient users to find what they’re looking for. The HTML heading elements should always be used to reflect the structure or outline of the document. If you want the appearance of a certain heading level, but not its semantic meaning, CSS classes are available that correspond to the visual styles of the HTML elements. For example, instead of an actual <h2></h2>, you could do <h3 class="h2"></h3>. Bear in mind that the actual HTML element used must still reflect the semantic content.
Important: Do not create <h1></h1> elements in your body content. There should only ever be one <h1></h1> per page, and it is almost always the page title.
| Heading | Example |
|---|---|
<h1></h1>
|
h1. Heading |
<h2></h2>
|
h2. Heading |
<h3></h3>
|
h3. Heading |
<h4></h4>
|
h4. Heading |
<h5></h5>
|
h5. Heading |
<h6></h6>
|
h6. Heading |
Subheadings within a heading
Sometimes you might want to have a heading with secondary text or subheading in it. Use the <small class="text-body-secondary"></small> element:
Lead
Make a paragraph stand out by adding the lead class.
This is a lead paragraph.
This is a regular body paragraph for comparison.
Inline text elements
Styling for common inline HTML elements:
| Element | Example |
|---|---|
<mark></mark>
|
The mark tag can be used to visually and semantically highlight text |
<s></s>
|
Use for text that you want to have a |
<small></small>
|
This line of text is meant to be treated as fine print. |
<strong></strong>
|
This line rendered as bold text. |
<em></em>
|
This line rendered as italicized text. |
Accessibility Tips for Text Elements
Remember that elements must convey meaning both visually and programmatically. There are non-semantic alternatives for bold (<b></b>) and italic (<i></i>) but these should be rarely used because they apply a visual style without conveying that meaning programmatically.
There are also styles for underlining text, but underlines on the web have become so closely associated with linked text that underlining should never be used except for links, where it is added automatically (do not underline the text in addition).
CSS Utilities
| Class | Example |
|---|---|
text-center
|
Center-align text |
text-end
|
Right-align text |
text-lowercase
|
Transform text to all lowercase |
text-nowrap
|
Prevents whitespace from wrapping |
text-start
|
Left-align text |
text-uppercase
|
Transform text to all uppercase |
Blockquotes
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.
A well-known quote, contained in a blockquote element.
Naming a source
The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as well.
A well-known quote, contained in a blockquote element.
Lists
Use bulleted (unordered) lists (<ul>) for content whose order could be rearranged without affecting its meaning, and numbered lists (<ol>) for content whose order is meaningful.
To hide the bullets for unordered lists, add the list-unstyled class. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
Colors
We use the UVA Web Palette with a few additions and modifications. Be sure to read the accessibility note below, and refer to the UVA page for additional guidelines.
Accessibility Tips for Colors
To meet WCAG AA requirements for readability, only UVA Blue, Secondary Orange, Secondary Blue, Text Gray, and Emergency Red are approved for text on a white background or as a color field behind white text. Secondary Orange must be at least 18px and bold or 24px and not bold.
Rows & Columns
Use shortcodes to create grids of rows and columns. Fractions can be mixed and matched to add up to one whole.
Rendered Examples
One Half
One Half
One Fourth
One Fourth
One Fourth
One Fourth
One Fourth
Three Fourths
One Fourth
One Fourth
One Half
One Third
One Third
One Third
One Third
Two Thirds
One Sixth
Five Sixths
Code Examples
[row]
[one_half]…[/one_half]
[one_half]…[/one_half]
[/row]
[row]
[one_fourth]…[/one_fourth]
[one_fourth]…[/one_fourth]
[one_fourth]…[/one_fourth]
[one_fourth]…[/one_fourth]
[/row]
[row]
[one_fourth]…[/one_fourth]
[three_fourths]…[/three_fourths]
[/row]
[row]
[one_fourth]…[/one_fourth]
[one_fourth]…[/one_fourth]
[one_half]…[/one_half]
[/row]
[row]
[one_third]…[/one_third]
[one_third]…[/one_third]
[one_third]…[/one_third]
[/row]
[row]
[one_third]…[/one_third]
[two_thirds]…[/two_thirds]
[/row]
[row]
[one_sixth]…[/one_sixth]
[five_sixths]…[/five_sixths]
[/row]
Home Page
Home page content is comprised of “Features,” which come in two types: slides and blocks. Slides appear in the carousel at the top of the page, while blocks appear in a grid below.
For both slides and blocks, a title, image, and link URL are required. Brief body text (1-3 sentences) is highly recommended for blocks, but is optional for slides.
Slides
Up to three slides are displayed at any given time, pulled randomly from the pool of active slides. In other words, if five slides are currently active, the three to be displayed will be selected at random. A slide is active if it is published and its expiration date has not yet passed.
Slide Image Dimensions
2000 x 500 pixels
(This block just demonstrates aspect ratio, not actual image size)
Blocks
Blocks are displayed in multiples of three. If six blocks are active, all six are displayed. If eight blocks are active, six are randomly selected and displayed.
Block Image Dimensions
900 x 600 pixels
(This block just demonstrates aspect ratio, not actual image size)
Header Images
Header images appear at the top of every page. There is a collection of hard-coded generic images, of which one is randomly selected unless the subsite or page has an override. The subsite setting can be changed by a site Administrator and is done in the Options page of WordPress Admin. The page-level setting can be changed by supplying a featured image for the page.
2000 x 500 pixels
(This block just demonstrates aspect ratio, not actual image size)
Icons
The icons library can be viewed at https://icons.getbootstrap.com/. Once you’ve selected an icon, you can insert it into the page using the following shortcode:
[icon id="ICON-ID"]
[icon id="ICON-ID" label="Accessibility label"]
Replace the ICON-ID with the appropriate icon’s ID found on the icon library listing page. For example, for the icon, the ID is emoji-sunglasses.
The accessibility label is required when the icon has meaning and is not otherwise described. For example, if it is the only content of a button, it must have a label that describes what the button does. This is not required when the icon is purely decorative or if it is accompanied by text that explains what the icon signifies.
Components
Buttons
Add the btn class to a button or link to get the base styling, then add one of the variant classes below to get the desired appearance. To use the outline variant, simply insert outline- between btn- and the variant name. For example, btn-primary would become btn-outline-primary.
| CSS Class | Example | Outline Example |
|---|---|---|
btn-primary
|
Primary | Primary Outline |
btn-orange
|
Orange | Orange Outline |
btn-secondary
|
Secondary | Secondary Outline |
btn-light
|
Light | Light Outline |
btn-dark
|
Dark | Dark Outline |
btn-success
|
Success | Success Outline |
btn-danger
|
Danger | Danger Outline |
btn-warning
|
Warning | Warning Outline |
btn-info
|
Info | Info Outline |
Note: The previous site theme used .button instead of .btn. All such existing buttons will be the same as the Orange button:
Tables
Tables should only be used for presenting tabular data, never for layout or to create columns, and should be clearly introduced and have descriptive column and row headings. Column headings should be <th> elements within a <tr> within the <thead> element. Row headings should also use the <th> element. Non-heading row cells should use <td>.
Responsive Tables
Wrap the table in <div class="table-responsive"></div> to enable horizontal scrolling. This is important for all but the narrowest of tables.
Sample Table Markup
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Row 1 Column 1</th>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<th scope="row">Row 2 Column 1</th>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
<tr>
<th scope="row">Row 3 Column 1</th>
<td>Row 3 Column 2</td>
<td>Row 3 Column 3</td>
</tr>
</tbody>
</table>
</div>
Example Tables
The markup above results in the following table. Notice how the <th> column and row headings are automatically bolded.
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |
By just adding the table-striped class to the table, we get automatically striped rows:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |
To reduce the padding, apply the table-sm class to the table:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |
Legacy Table
The following table shows what a table with legacy markup—with no Bootstrap markup—looks like. There are not many such tables, so it will be preferable to just go back and add classes to them rather than implement defaults that we might not always want.
| Column 1 | Column 2 | Column 3 |
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |
Media
Images
Accessibility Tips for Images
Always be sure to provide descriptive and meaningful alt text. Refer to this decision tree for guidance on what good alt text looks like in various use cases.
Alignment
Alignment is handled via the WordPress editor.
| Alignment | Example |
|---|---|
| None |
This text precedes the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a blandit purus, sed tempor ipsum. Vestibulum arcu sapien, aliquet vel sapien eu, efficitur vulputate arcu. Fusce bibendum enim orci, vel. 
This text follows the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem magna. Aliquam eleifend pretium massa sit amet molestie. Sed consequat elit neque, a dictum ex venenatis at. Etiam luctus. |
| Center |
This text precedes the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a blandit purus, sed tempor ipsum. Vestibulum arcu sapien, aliquet vel sapien eu, efficitur vulputate arcu. Fusce bibendum enim orci, vel.
This text follows the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem magna. Aliquam eleifend pretium massa sit amet molestie. Sed consequat elit neque, a dictum ex venenatis at. Etiam luctus. |
| Left |
This text precedes the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a blandit purus, sed tempor ipsum. Vestibulum arcu sapien, aliquet vel sapien eu, efficitur vulputate arcu. Fusce bibendum enim orci, vel.
This text follows the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem magna. Aliquam eleifend pretium massa sit amet molestie. Sed consequat elit neque, a dictum ex venenatis at. Etiam luctus. |
| Right |
This text precedes the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a blandit purus, sed tempor ipsum. Vestibulum arcu sapien, aliquet vel sapien eu, efficitur vulputate arcu. Fusce bibendum enim orci, vel.
This text follows the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem magna. Aliquam eleifend pretium massa sit amet molestie. Sed consequat elit neque, a dictum ex venenatis at. Etiam luctus. |
Images with captions
Video
No special handling is required for video. WordPress automatically converts Vimeo video URLs into the necessary HTML markup.
Accordions
Accordions allow sections of content to be collapsed and expanded by clicking the section header. You can configure them so that only one section can be open at a time, or so that each section can be opened independently of the others.
Basic Example
…
…
…
[accordion]
[acc_panel title="Section 1"]…[/acc_panel]
[acc_panel title="Section 2"]…[/acc_panel]
[acc_panel title="Section 3"]…[/acc_panel]
[/accordion]
One Panel Open Example
If you’d like to have a panel open by default, simply add the open="true" attribute to its shortcode. Note that it does not have to be the first panel.
…
…
…
[accordion]
[acc_panel title="Section 1"]…[/acc_panel]
[acc_panel title="Section 2" open="true"]…[/acc_panel]
[acc_panel title="Section 3"]…[/acc_panel]
[/accordion]
Independent Panels Example
In this example, each panel is controlled independently of the others, meaning you can have them all open if you wish. To enable this behavior, add the always_open="true" attribute to the shortcode.
…
…
…
[accordion]
[acc_panel title="Section 1" always_open="true"]…[/acc_panel]
[acc_panel title="Section 2" always_open="true"]…[/acc_panel]
[acc_panel title="Section 3" always_open="true"]…[/acc_panel]
[/accordion]
Custom Heading Level Example
Remember that for accessibility reasons, headings must follow the structure of the document. By default, accordions use Heading Level 2 (<h2>…</h2>) for the section headers, but if your accordion is already logically beneath an H2 (or other level), you will need to set the correct heading level for your sections. For example, this paragraph is headed by an <h3>, so an accordion in this section should use <h4> headings.
[accordion]
[acc_panel title="Section 1" heading_level="h4"]…[/acc_panel]
[acc_panel title="Section 2" heading_level="h4"]…[/acc_panel]
[acc_panel title="Section 3" heading_level="h4"]…[/acc_panel]
[/accordion]
Important! If you have more than one accordion on a page, you will need to explicitly set the id attribute on the [accordion] shortcode, and the parent_id attribute on the [acc_panel] shortcodes within. These values must match within each accordion or else you will get unexpected behaviors.
[accordion id="id-example"]
[acc_panel title="Section 1" parent_id="id-example"]…[/acc_panel]
[acc_panel title="Section 2" parent_id="id-example"]…[/acc_panel]
[acc_panel title="Section 3" parent_id="id-example"]…[/acc_panel]
[/accordion]
Alerts
Containers
Generic containers (<div>…</div>) can be created using the [container] shortcode. You can then add a class attribute to style the container for your purposes.
[container class="my-visual-style text-center"]
…
[/container]
Accessibility
Please refer to the Content Creator’s Intro to Digital Accessibility for information and guidance on how to help ensure your content is accessible.