Yale School of Medicine

Institutional Planning & Communications

Web Template Initiative

Web Template Initiative, Yale School of Medicine

Institutional Planning & Communications
300 George St, Ste. 773
New Haven, CT 06511
Tel: 203.785.5824
Fax: 203.785.4327
editor@info.med.yale.edu

Middle column text styles

The following styles are available to apply to text within the middle column. If you need additional styles, please contact ITS-WS or YSM-IPC to assist you with development. Font tags should never be used as they are outdated HTML and will not update if you make a style change to your entire site.

Middle column style tags

Style Tag Description

Page heading h1

<h1> </h1> This tag should be used for page titles only.

Subheading h2

<h2> </h2> Use this tag for subheadings within the main text. We suggest using the tag <h3> if the subheading is close to the main page title <h1>.

Paragraph heading h3

<h3> </h3> This tag can be used as a third-level heading, or on pages with a small amount of paragraph text, it can be used in lieu of the <h2> tag.
paragraph text <p> </p> The paragraph tag should be used for all text not in headlines or lists. Font tags should never be used.
bolded text <strong> </strong> Use this tag to bold text.
italicized text <em> </em> Use this tag to italicize text.
  • bulleted list
<ul> <li> </li> </ul> Use this tag for bulleted lists.
  1. numbered list
<ol> <li> </li> </ol> Use this tag for numbered lists.
block quote text
<blockquote> </blockquote> This tag indents text from the right and left margins.

quoted text or specially highlighted text.

<p class="quote"> </p> Use the quote paragraph tag to highlight special text.

 

Breadcrumbs

The breadcrumb style is predefined in the template code; however, its default setting is not to display the breadcrumb. To display the breadcrumb, change the class from “hide-breadcrumb” to “null” in the page code. Alternatively, to hide breadcrumb text, change the class from “null” to “hide-breadcrumb.”


Middle column text style examples:


Page Heading (h1)

Paragraph text (p). Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Subheading (h2)

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

(p class="quote") Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Paragraph heading (h3)

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


See the image guide for image styles.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Blockquote (blockquote). Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Header for list (h3)

  • Bulleted list (ul). Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
  • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
  • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

Header for list (h3)

  1. Numbered list (ol). Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
  2. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
  3. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat