Skip to main content
Explore URMC
menu

Text Styles

Headings

While it is tempting to choose a heading because of what it looks like, remember that headings have a specific function. Headings are ranked in order of importance, with 1 being the most important, and 5 being the least important.

Each page should have one main heading, which is the first element at the top of the page, and that describes concisely the content to follow. As much as possible, you should use relevant key search terms in your first heading to boost your ranking in search engines. The Heading 1 style should be reserved for this first heading. Thereafter, subheadings should use Heading 2, sub-subheadings should use Heading 3, and so on. This creates a consistent look for all your pages.

H1

First in importance on the page.

H2

Second in importance on the page.

H3

Third in importance on the page.

H4

Fourth in importance on the page.

Body Text

Text styles are styles that can be applied inline; that is, they can be used within a sentence without breaking the paragraph to start a new line. Text styles you'll find useful include:

Style Name Appearance Usage Notes
text-bold-caps Sample text using text-bold-caps Use for uppercase bold lettering.
text-small Sample text using text-small Use for text that is 80% smaller than the default font.
text-small-fancy Sample text using text-small-fancy Use for text that is 80% smaller, serif, and italic.
text-fancy Sample text using text-fancy Use for text that is serif, and italic.
text-large Sample text using text-large Use for text that is 118% larger than the default font.
text-large-fancy Sample text using text-large-fancy Use for text that is 118% larger, serif, and italic.
text-xl Sample text using text-xl Use for text that is 145% larger than the default font.
text-xl-fancy Sample text using text-xl-fancy Use for text that is 145% larger, serif, and italic.

Div Styles

div-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

div-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

Pull Quotes

Pull Quote Full

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

This is my testimonial in a full width pull quote. Here is another line of text.

Pull Quote Right Half / Pull Quote Right Third

This is my testimonial in a right-aligned pull quote that takes up half the width of the copy/text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

This is my testimonial in a right-aligned pull quote that takes up a third of the width of the copy/text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis\ ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis\ ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

Pull Quote Left Half / Pull Quote Left Third

This is my testimonial in a left-aligned pull quote that takes up half the width of the copy/text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

This is my testimonial in a left-aligned pull quote that takes up a third of the width of the copy/text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis\ ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.

Pull quote highlight

This testimonial has a highlighted line. After adding the proper pull quote style, select the text to be highlighted and add the span.quoteHighlight option from the Styles dropdown.