Web Style Guide
Watch this short video to see how you can get started editing content on your pages of the NYU Wagner website. For more advanced training or help with making changes on the website, please contact wagner.communications@nyu.edu.
View an annotated Landing Page for identifying the different modules
View an annotated Basic Page for identifying the different modules
Headers
Headers used on the site present typographical hierarchy. H1 will only be used as the page title (which is the style of "Web Style Guide" at the top of this page).
This is an H2. Lorem Ipsum Dolor Sit Amet
This is an H3. Lorem Ipsum Dolor Sit Amet
This is an H4. Lorem Ipsum Dolor Sit Amet
This is normal text. Lorem ipsum dolor sit amet. You do not need to put extra returns between paragraphs of body text because the styling is built in for space.
Links & Buttons
Text link: Used for links throughout paragraphs. This is a link. (Sentence case)
"More" link: Used when a links appears at the end of a paragraph and is a subtle call to action, such as "Learn more." This is a link (Sentence case)
Button: Used for strong calls to action, such as "Request Information." (Title Case)
Bullets & Ordered Lists
Bullets are used to break up large amounts of content or highlight key points. Ordered lists are used to display steps or a specific order of content.
- This is a bullet list item.
- This is a bullet list item.
- This is a bullet list item. Lorem ipsum dolor sit amet.
- This is an ordered list item.
- This is an ordered list item.
- This is an ordered list item. Lorem ipsum dolor sit amet.
Block Quote
Used for landing page teaser descriptions or in paragraph pull quotes. Example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quid nostrus exercitation ullamco.
Tables
Used sparingly to display complex information.
Blue Table Header options:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Text goes here | And text also goes here | And also here and more and more |
| Text goes here | And also here | And also in this field |
Option with both First Row and First Column headers:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Text goes here | And text also goes here | And also here and more and more |
| Text goes here | And also here | And also in this field |
Gray Table Header options:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Text goes here | And text also goes here | And also here and more and more |
| Text goes here | And also here | And also in this field |
Option with both First Row and First Column headers:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Text goes here | And text also goes here | And also here and more and more |
| Text goes here | And also here | And also in this field |
Watch this short video to see how to apply the above styles within "Free-form Editor" modules on the website.