Headings

Heading 1 Page Title

Usage: The <h1> to <h6> tags define headers. <h1> defines the largest header and is typically used to wrap around the page title. The h1 tag defines your page title, what your page is actually about. There should only be one h1 tag on each page. This heading tag should not be used to style your content. The purpose of the heading tag is to provide structure for your document, much like an outline displays the structure of a term paper or technical document.

Heading 2

Usage: <h2> tags are primarily used for callouts or headings for promo boxes. This heading tag should not be used to style your content.

Heading 3

Usage: <h3> tags are the first level headings in the content area. When adding new content to pages or posts, this should be the top level heading.

Hyperlinked Heading 3

Usage: This style shows a H3 heading with a hyperlink applied. 

Heading 4

Usage: <h4> tags are the second level headings in the content area. 
Heading 5
Usage: <h5> tags are the third level headings in the content area. 
Heading 6
Usage: <h6> tags are the fourth level headings in the content area. 

Text Styles

Font Stack

Headings: SangBleuEmpire, Times, serif
Body and Subheadings: din-2014, “Din 2014”, sans-serif

Font Weights

Headings: 400, 400 italic, 600, 600 italic, 700, 700 italic
Body: 400, 400 italic, 600, 600 italic, 700, 700 italic

Intro Text

Vivamus imperdiet pharetra tempus. Duis cursus iaculis lectus, sed rutrum turpis sollicitudin sit amet. Fusce eleifend eros in eros sodales sollicitudin. Donec ullamcorper mi nec neque facilisis, ut fringilla sapien consequat. Nam sed velit nisl. Pellentesque lorem magna, ultrices vel suscipit in, pharetra nec lectus.

Usage: The intro class or short code should be used for introductory paragraphs on landing pages that need more visual prominence or need to be set apart in some way from the rest of the text. To apply an intro class, create a paragraph block, open the sidebar block settings, and add the word “intro” to the “Advanced” area.

Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus nunc consequat mauris volutpat, eleifend accumsan metus tempor. Cras venenatis, urna in tincidunt maximus, nisi mauris cursus sem, quis volutpat ex nulla nec est. Mauris ornare orci diam, ut pretium eros tristique in. Donec massa mi, ultricies sit amet velit ut, semper vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

Usage: This is the default paragraph or body text for your site. WordPress will add <p> tags automatically on the page. Even though they are not in the editor they will be on the generated page, so there is no need to add in the tags when adding content on your site. WordPress views one hard return as a break and two hard returns as a new paragraph, so if you want a line space between two paragraphs you should add two hard returns instead of just one.

Blockquote

Mauris eleifend sem id velit tincidunt, nec dapibus ex consectetur. Pellentesque dignissim vestibulum neque nec varius. Estibulum a varius metus. Quisque a ex ante. Morbi purus urna, tristique a cursus vel, dictum id felis. Proin nec tristique mi. Vestibulum convallis malesuada scelerisqu

Lorem Ipsum, dolor semet
Usage: A blockquote specifies a section that is quoted from another source, or a way to call out a portion of your own text. A citation can be added, if necessary.

Horizontal Rule

Usage: The horizontal rule defines a thematic break in an HTML page (e.g. a shift of topic).

Other

Link in paragraph text

Usage: A hyperlink is used to link from one page to another. You can add a link to an image or text.

This is bold, this is italic, this is underlined

Usage: Italics can be used for added emphasis or to denote an article. Bold defines important text. Tip: Avoid using underline since it could be confused for a hyperlink.

This is small text and can be used for downplaying elements, like citations at the end of an article.

Lists

Bulleted List

  • Risus ipsum maximus enim
  • Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc
  • Sed sagittis dictum felis
Usage: Use the list block to create an unordered list.

Numbered List

  1. Risus ipsum maximus enim
  2. Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc
  3. Sed sagittis dictum felis eu porttitor
Usage: Use the list block to create a numbered list.

Colors

VAACRTF Colors

yellow
#DFBF3B

maroon
#80002b

light gray
#EDEDED

lighter gray
#F5F5F5

white
#FFFFFF

 

Virginia Humanities Main Site Colors

navy blue
#232D4B

light blue
#B7D5D9

blue
#009FDF

text
#262626

yellow
#FDDA24

Buttons

Images

Full Width Image

A full width banner image should be at least 1400px wide.

Content Image

An image that appears within the content area of a page should be at least 690px wide, and when using a gallery of multiple photos, each photo should be at least 790px wide.

Profile Photos

A profile photo should be at least 300px wide. A circular shape can be assigned using in the settings for an image block.

Explore the Virginia Humanities Network
CLOSE