NJ Content Style Guide

This has been updated on 11.16.2022.

Typography

Headers: Lora Regular

Body text: Lato Regular

Teaser Body Text: Lora Regular, 16px. Used to tease content in callout intro text.

Site Colors

Base Colors

Base color options that can be used with anything on the site such as components, text, icons, charts, etc. Some components will show a light or dark version of each color.

Additional Background Colors

Additional background color options.

Pullquotes

Pullquote with source and secondary accent

—
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

–Source Name

Pullquote with no styling

—
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Components

Checklists

Checklists can have any icon and site color. Each item can be a different icon and color. Can be used without a title, but icon will center itself to the left of the content rather than align at the top of each item. Title size and color cannot be changed. Any HTML content can be inside a checklist item description, such as an unordered list or additional headers.

Checklists should only be used to draw attention to the most important lists of information on a page (such as tips, application/supply checklists, pros/cons, etc.) They should not be used everywhere on a page as a full replacement for unordered (bulletpoint) lists.

Regular Checklist with titles

• Checklist Item

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Checklist Item

  Mauris a diam maecenas sed enim ut sem viverra. Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Ut sem nulla pharetra diam sit amet nisl. In mollis nunc sed id semper risus.

• Checklist Item

  Aenean pharetra magna ac placerat vestibulum lectus.

• Checklist Item

  Viverra vitae congue eu consequat ac felis donec et odio. Ac auctor augue mauris augue neque gravida in fermentum et.

• Checklist Item

  Eget est lorem ipsum dolor. Diam sollicitudin tempor id eu nisl nunc mi.

Regular Checklist without titles

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• At volutpat diam ut venenatis tellus in metus. Nibh sit amet commodo nulla facilisi nullam. Quis lectus nulla at volutpat diam ut venenatis. Integer feugiat scelerisque varius morbi enim nunc. Tellus elementum sagittis vitae et leo duis ut diam quam. Magna fringilla urna porttitor rhoncus dolor purus non. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Pharetra vel turpis nunc eget.
• Aenean pharetra magna ac placerat vestibulum lectus.
• Elementum curabitur vitae nunc sed. Nibh mauris cursus mattis molestie. Vel eros donec ac odio. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin. Mauris vitae ultricies leo integer malesuada nunc. Nec ullamcorper sit amet risus nullam. Quam id leo in vitae turpis massa sed elementum tempus. Ut sem viverra aliquet eget sit amet tellus. Sed enim ut sem viverra. Tincidunt arcu non sodales neque sodales ut etiam. Duis at consectetur lorem donec massa sapien.
• Eget est lorem ipsum dolor. Diam sollicitudin tempor id eu nisl nunc mi.

Checklist used with other icons

Icon options can be found here.

• Checklist Item

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Checklist Item

  Mauris a diam maecenas sed enim ut sem viverra. Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Ut sem nulla pharetra diam sit amet nisl. In mollis nunc sed id semper risus.

• Checklist Item

  Aenean pharetra magna ac placerat vestibulum lectus.

• Checklist Item

  Viverra vitae congue eu consequat ac felis donec et odio. Ac auctor augue mauris augue neque gravida in fermentum et.

• Checklist Item

  Eget est lorem ipsum dolor. Diam sollicitudin tempor id eu nisl nunc mi.

Checklist used as a header option

Icon options can be found here.

• Section Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris a diam maecenas sed enim ut sem viverra. Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Ut sem nulla pharetra diam sit amet nisl. In mollis nunc sed id semper risus.

Resource Lists

Line to the left can have any base color, but primary is preferred. General usage is for lists of professional organizations or certifications, but can be used for any list of resource links with descriptions that are not interlinks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris a diam maecenas sed enim ut sem viverra. Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Ut sem nulla pharetra diam sit amet nisl. In mollis nunc sed id semper risus. Aenean pharetra magna ac placerat vestibulum lectus. Viverra vitae congue eu consequat ac felis donec et odio. Ac auctor augue mauris augue neque gravida in fermentum et. Eget est lorem ipsum dolor. Diam sollicitudin tempor id eu nisl nunc mi. Sagittis orci a scelerisque purus. Dictum sit amet justo donec. Malesuada fames ac turpis egestas integer eget. Eget est lorem ipsum dolor. Diam sollicitudin tempor id eu nisl nunc mi. Sagittis orci a scelerisque purus. Dictum sit amet justo donec. Malesuada fames ac turpis egestas integer eget.

Icons

Icon options can be found here. Solid options are the default. Generally, icons are best used in other components. We have the ability to add it on its own as listed here, if there is a need for it. Any site color can be used.

Icon examples

X-large icon.

Large icon.

Medium icon.

Small icon.

Icon Percentages

This component can be used alone or in columns. Default is left alignment, this cannot be changed. Any base color can be applied. Icon options can be found here. Should be used with one to two word titles. Can show a percentage only up to 100%.

Example of Icon Percentages

Tables

Tables are basic HTML elements that are mobile responsive. The caption/title will always have a purple background and the text size cannot be changed.

Example of a table with career information.

Job Outlook for Therapy Careers

Career	Median Salary (2020)	Projected Job Growth (2019-2029)
Counselors and Social Workers	$47, 500	14%
Substance Abuse, Behavioral Disorder, and Mental Health Counselors	$47,660	25%
Marriage and Family Therapists	$51,340	22%
Clinical, Counseling, and School Psychologists	$79,820	3%

Lists

Basic HTML unordered lists can be used.

Basic unordered, bulleted list

• Title
• Title
• Title

Basic ordered, numbered list

1. Title
2. Title
3. Title

Interlinks

Used for internal linking. Secondary color is preferred, but any base color can be applied. Can add a label and/or image if needed.

Two interlinks stacked

Interlink with label

Interlink with image

Buttons

Used for internal/external links within accordions or for external product links on product/gift pages (ex.: 15 Books That Every Nurse Should Read). Should not be used in place of interlinks.

Left is the default position. Primary and secondary colors are preferred, but any base color can be applied in the class attribute. Preferably should be used alone rather than in columns; if must be used in columns, use the alternate shortcode used in the second example.

Buy on Amazon

Buy on Amazon

Buy on Amazon

Buy on Amazon

Buttons in columns

California LVN Programs The Best LVN-to-BSN Programs in California

Biography

Used for page authors, reviewers, and contributors, as well as interview sections. Classes included are image, Name, Title (or occupation or pronoun preferences), Email, LinkedIn, Twitter, and Facebook links, and description. Descriptions should be kept relatively short, as the longer they get, the smaller the image will center itself to the left in comparison. One paragraph is preferable. Any base site color can be used, but it will display as a light version of the color.

Bio images by default display in color. NurseJournal uses grayscale bio images, which can be adjusted by using the appropriate Cloudinary transformation code (e_grayscale) in the image URL.

Example with white color, image, name, title, and link icons.

Example with primary color.

Example with NJ icon.

Degree Cards

Specifically used on Degree and Career Overview pages. Recommended use is to display careers only.

Can display up to 4 cards in a single row. Converts to slider format in mobile.

Specialties/Careers with Salary and Job Outlook — Full-width

Components Styled for Specific Uses

"Fast Facts" style Callout

Transparent Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• At volutpat diam ut venenatis tellus in metus. Nibh sit amet commodo nulla facilisi nullam. Quis lectus nulla at volutpat diam ut venenatis. Integer feugiat scelerisque varius morbi enim nunc. Tellus elementum sagittis vitae et leo duis ut diam quam. Magna fringilla urna porttitor rhoncus dolor purus non. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Pharetra vel turpis nunc eget.
• Aenean pharetra magna ac placerat vestibulum lectus.
• Elementum curabitur vitae nunc sed. Nibh mauris cursus mattis molestie. Vel eros donec ac odio. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin. Mauris vitae ultricies leo integer malesuada nunc. Nec ullamcorper sit amet risus nullam. Quam id leo in vitae turpis massa sed elementum tempus. Ut sem viverra aliquet eget sit amet tellus. Sed enim ut sem viverra. Tincidunt arcu non sodales neque sodales ut etiam. Duis at consectetur lorem donec massa sapien.
• Eget est lorem ipsum dolor. Diam sollicitudin tempor id eu nisl nunc mi.

Posts Component with Swipable Functionality

Used for interlinking resources, articles, or blog posts at the bottom of the page. Title is editable, and can include optional subtitle, if desired. Component automatically pulls in each article's excerpt and feature photo.

Max number of articles that can be displayed is 6. Can list by article URLs or post ids in the "post_in" attribute.

Visualization Opportunities

Examples of using our resources and components to make unique visualization.

Charts

Charts can be done through Everviz. These include pie, bar, column, and line charts. Also have the ability to do a few special types of charts showing poll results, etc. Below are a few examples:

"Fact Boxes"

These are just callouts with styled text so they can be used in the same way.

Used in columns

Used in columns in a single callout

Used in columns with white background

List of data points/facts

With links:

Without links, light purple background:

Secondary base color background:

White background:

"Pros/Cons" List

Ideas to display positive negative items or lists.

Definitions/Side-by-side comparisons

White background:

The Two Types of Motivation