Style Guide

Last updated: 12/7/2023

Main Colors

Section Colors

Body Tag

Header Tags

H1 tags should never be used within the body of the site. They are rendered through the drupal template at the top of each page. Header tags should not be used for "design" they should be used in a cascaded format. That is that an H3 tag should not appear before an H2 tag; an H4 before an H3 tag, etc. Block titles are presented as H2 tags and it is acceptable for a block body to contain H2-H6 tags. For reference

Paragraphs

Long-form content (such as this document) should leverage P tags for separating paragraphs.

Lists

There are three major types of semantic HTML lists: UL (unordered, a.k.a. bulleted), OL (ordered, a.k.a. numbered), and DL (definition lists). Additionally Drupal (the CMS) makes use of several non-semantic list-like structures using DIV tags with specific classes assigned. Whenever possibly you are encouraged to use the semantic HTML list types.

UL (Unordered, a.k.a. Bulleted Lists)

• First bullet
  • Nested bullet (two-deep)
    • Nested bullet (three-deep)
      • Nested bullet (four-deep)
• Second bullet
• Third bullet

OL (Ordered, a.k.a. Ordered Lists)

1. First bullet
   1. Nested bullet (two-deep)
      1. Nested bullet (three-deep)
         1. Nested bullet (four-deep)
2. Second bullet
3. Third bullet

DL (Definition Lists)

Definition Term (DT tag)

Definition one (DD tag)

Definition two

Blockquotes and Cites

Blockquotes should not be used for indentation but used when quoting something:

"The integration of professional wisdom with the best available empirical evidence in making decisions about how to deliver instruction." Quote from Dr. Grover (Russ) Whitehurst, former director of the Institute of Education Sciences within the U.S. Department of Education

Inline Styles

Inline styles consistent non-block-level elements such as EM, STRONG, A, IMG (see more about images below), SUB_script, SUP^script, ABBR, etc.

Images

Information to come.

Buttons

We also have a button style for the LINCS websites. This style sheet applies them to the element that is assigned a class of .button or .button-alt. It's recommended that these classes be assigned to anchor tags (A) or buttons (BUTTON tag):

Button

Button Alt

Button Alt2

Button Button Mini modifier

Blocks

Blocks are Drupal specific layout elements. Below are common styles for skinning individual blocks.

We have three alternate classes which can be used to apply simple styles to existing blocks.