In-Body Text Styles

Headings

Headings orient users to the page and quickly inform them about the page’s organization. They allow users to easily scan and find information they are looking for. Well written and efficiently organized headings can drastically improve your SEO. 

Heading 1: not styled in this example - use for page titles only

Heading 2

Heading 3

Heading 4

Heading 5

Special-use Header 2

To apply: Assign header class, then assign H2 Nuetraface. Bold/Italic styling optional.

Special-use Header 3

To apply: Assign header class, then assign H3 Nuetraface. Bold/Italic styling optional.

Fonts, Text & Paragraphs

A B ‌C ‌Ć ‌Č ‌D ‌Đ ‌E ‌F ‌G ‌H ‌I ‌J ‌K ‌L ‌M ‌N ‌O ‌P ‌Q ‌R ‌S ‌Š ‌T ‌U ‌V ‌W ‌X ‌Y ‌Z ‌Ž ‌a ‌b ‌c ‌č ‌ć ‌d ‌đ ‌e ‌f ‌g ‌h ‌i ‌j ‌k ‌l ‌m ‌n ‌o ‌p ‌q ‌r ‌s ‌š ‌t ‌u ‌v ‌w ‌x ‌y ‌z ‌ž ‌ ‌Α ‌Β ‌Γ ‌Δ ‌Ε ‌Ζ ‌Η ‌Θ ‌Ι ‌Κ ‌Λ ‌Μ ‌Ν ‌Ξ ‌Ο ‌Π ‌Ρ ‌Σ ‌Τ ‌Υ ‌Φ ‌Χ ‌Ψ ‌Ω ‌α ‌β ‌γ ‌δ ‌ε ‌ζ ‌η ‌θ ‌ι ‌κ ‌λ ‌μ ‌ν ‌ξ ‌ο ‌π ‌ρ ‌σ ‌τ ‌υ ‌φ ‌χ ‌ψ ‌ω ‌ά ‌Ά ‌έ ‌Έ ‌έ ‌Ή ‌ί ‌ϊ ‌ΐ ‌Ί ‌ό ‌Ό ‌ύ ‌ΰ ‌ϋ ‌Ύ ‌Ϋ ‌Ώ ‌Ă ‌Â ‌Ê ‌Ô ‌Ơ ‌Ư ‌ă ‌â ‌ê ‌ô ‌ơ ‌ư ‌1 ‌2 ‌3 ‌4 ‌5 ‌6 ‌7 ‌8 ‌9 ‌0 ‌‘ ‌? ‌’ ‌“ ‌! ‌” ‌( ‌% ‌) ‌[ ‌# ‌] ‌{ ‌@ ‌} ‌/ ‌& ‌\ ‌< ‌- ‌+ ‌÷ ‌× ‌= ‌> ‌® ‌© ‌$ ‌€ ‌£ ‌¥ ‌¢ ‌: ‌; ‌, ‌. ‌*

Web paragraphs (P) styling, or the page body's text, is formatted in the following way: Open Sans; 16px; #333; weight: 400; line-height: 24.4706px

Bold and Italics can be added to page text.

Special-use Styling

Use the WYSIWYG editor to apply these styles. Some styles are "stubborn" and it is difficult to remove a styling when you are ready to switch back to normal text. To fix this, use "Source" mode to edit out styling classes.

• Intro text: used for special styling at the top of a page or in a feature element

• Photo Credit: Used under photos/features that do not have captions available or when caption styling does not render as desired (example: news header images)

• Yellow Highlight
• Green Highlight
• Light Grey Highlight
• Grey Highlight: Contrast with normal text is not recommended. May be used with alternative font colors (light colors).
• OVPR Blue Text (bold styling applied)
• OVPR DARK Blue Text (bold styling applied)
• Maroon Text (bold styling applied)
• Grey Text (bold styling applied)
• Red Text (bold styling applied)
• Green Text (bold styling is automatically applied, text does NOT meet accessibility requirements wihtout bold styling)

Links

Regular link

Opens a new tab (External Link)

Download

Login required

Lists

Bulleted Lists

• Category
  • Item
    • Detail
    • Detail
  • Item
    • Detail
• Category
  • Item
    • Detail
      • Great Detail
        • Greaterrrrrr Detail

Numbered Lists

1. Category
   1. Item
      1. Detail
      2. Detail
   2. Item
      1. Detail
2. Category
   1. Item
      1. Detail
         1. Great Detail
            1. Greaterrrrrr Detail

Buttons

OVPR Styles

Select button styles.

Button Primary

Button Secondary

Button Outline

Button Small

Button Emphasis

Button Give

External Link Button: btn btn-ovpr-primary external

Folwell Buttons

Terms can be applied in the "Advanced" area.

 Button Maroon: bg-maroon btn-folwell

Button Maroon Small: bg-maroon btn-folwell btn-small

Button Maroon Emphasis: bg-maroon btn-arrow btn-folwell

Button Maroon Outline: btn-folwell btn-outline

Button White Outline: btn-folwell btn-outline white-outline 

Button Grey Outline: btn-folwell btn-outline gray-outline

Button Maroon Full Width: bg-maroon btn-folwell btn-full

Button Give Folwell: btn-arrow btn-folwell btn-give

Emphasis Link: emphasis

Tables

Once table is added, use source to add more columns or rows. 

Tips: 

• If extra space is on the table (above/below), there may be a paragraph <p> tag used.
• To add white border lines, switch editor back to "raw html" and add to <th> and <td>: style="border: 2px solid white;"

Quotes

Pull Quote

Simple Pull Quote

Block Quote

It is a novel place where panurgic Gophers abound in a salubrious environment to unlock the effulgent marvels of life.