Northeastern Policies and Legal Notices

Editing information

Body Editing

If there are multiple sections in the body, all sections of the body should be identified with a heading. The heading tag is available in the toolbar.

Toolbar with Heading block highlighted
Format block open

Heading 1 and Heading 2 are much too large for body content and are reserved for page headings. Heading 3 should be used for main headings and Heading 4 for sub headings. Do not use bold for headings. Screen readers use the heading tagging to allow visually impaired individuals to skim information until they find the heading of the content they are looking for. Bold would force the screen reader to have to read through all content.

You can customize body content within the normal body using the tools provided

Editing tools

B - Bold

I -Italic

S - Strikethrough

X2 -Superscript

X2 -Subscript

The Omega icon provides a selection of special characters that can be inserted.

When copying and pasting from other documents like word, sometimes the coded formatting from the source gets transferred over. Generally you will receive a message asking if you want the system to remove the source formatting, which you do. Sometimes the system doesn't catch it. The Website is designed to work on everything from a large monitor to your phone. If you do not remove the source formatting it will not allow the text to adjust the size dependent on the size of the device.

The Tx button will remove the source formatting on a selection if it doesn't get removed automatically.

hyperlink tools

Hyperlinks can be inserted into the body by using the little chain link icon. Please hyperlink a full statement instead of just the word "here" Visually impaired or keyboard only users are not getting a full explanation of where the hyperlink will take them with just the word "here" but they will if it says "Sign up for registration day here" If there is an existing hyperlink that you want to remove, the greyed out icon in the example will darken and you can click on the chainlink with the X to remove the hyperlink.

Please use the bullet and numbering tools on the toolbar instead of typing them in. This will maintain consistency in numbering as well as throughout the website. Content with bullets or numbering will cause the promotion demotion icons to activate.

The quotation mark icon will create a block quote such as this.

video icon

Videos can be displayed on the website. Click on the video icon and a box will come up that allows you to put in the YouTube address. Please uncheck Autoplay. Videos MUST be captioned to be on the website. It is strongly encouraged that videos are placed on the Official Northeastern YouTube Channel where captioning assistance is available. Also, music must be licensed with either BMI or ASCAP or are from royalty free sources. Any music that is not included in one of the subscription licensing services or royalty free source is copyright infringement and will be removed from the site.

image icon

Images can be added to your pages, but they need to be prepared prior to upload. Most roles do not have access to upload images. Please reach out for training or assistance with images. Images that are too large will crash the website and images that are too small will be displayed with very poor quality. If someone is texting or emailing an image to you, please ask them not to compress the image to small or extra small.

Tables can be created in the body, When you click on the Table Icon (right of the Image Icon) you can specify the desired number of columns and rows, and designate headings in the first row, first column or both.


A horizontal line can be inserted to separate text

Additional Style Elements

Style elements can be found at https://www.njc.edu/njc-website-shortcode-style-guide

Primary small stroke button medium Button large stroke button

Buttons can be added in Extra Small, Small, Medium, and Large in both solid and stroke appearances. Solid buttons are coded for Yellow, Purple, Green, Black and Grey, Stroke buttons can be Black or Green.

[button link="#" type="primary" target="_blank"]Primary[/button]

Simply change the size and color as desired. For stroke buttons, use:

[button url="#" size="small" color="green" target="_blank" style="stroke"]Green Small[/button]

Green Full Width

A full width button has a size of "fullwidth" instead of xsmall, small, medium or large. The buttons can be floated left or right by adding "float="left" (or right) into the code without the parenthesis.

Info Box Title

Infoboxes allow you to emphasize information that you don't want the reader to miss They can be used with or without a title
This is what it looks like without a title

[infobox title="Info Box Title"]This is where the body copy for the infobox is placed.[/infobox]
The infobox title is optional, one can simply deploy the following

[infobox title=""]This is where the body copy for the infobox is placed.[/infobox]

Notifications

Notifications also call out important information with more importance

STOP! This notification color should only be used for very high level alerts such as closures or emergencies.

ALERT! This color should be used for important alerts such as: There is no registration today.

Green means go. Use this to draw attention to positive messages or benefits students get. Copy should be short, no more than one to two lines.

Use this box when you have an important piece of information that you want to stand out. Copy should be short, no more that one to two lines.

[notification color="red"]Notification copy goes here[/notification]

[notification color="yellow"]Notification copy goes here[/notification]

[notification color="green"]Notification copy goes here[/notification]

[notification color="black"]Notification copy goes here[/notification]

Toggles

Toggles allow you to provide a lot of information without taking up the entire page. Toggles will allow you to open more than one at a time.

This is general body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue ante, placerat sed purus at, tempus suscipit justo. Phasellus rutrum molestie urna in feugiat. Donec vehicula tempor leo sit amet convallis. Proin tincidunt eros quis mollis venenatis. Vestibulum gravida, mauris at ornare fringilla, tellus metus pulvinar ligula, et commodo urna nunc vitae diam.

Donec in mi eros. Sed sed quam hendrerit, egestas sem vel, pharetra purus. Sed feugiat sed nulla sit amet fringilla. Duis dictum est et hendrerit molestie. Ut ac porttitor tellus. Sed eu sem egestas, convallis ipsum a, eleifend lorem. Vestibulum hendrerit lorem nec libero rhoncus, sed facilisis lacus viverra.

This is general body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue ante, placerat sed purus at, tempus suscipit justo. Phasellus rutrum molestie urna in feugiat. Donec vehicula tempor leo sit amet convallis. Proin tincidunt eros quis mollis venenatis. Vestibulum gravida, mauris at ornare fringilla, tellus metus pulvinar ligula, et commodo urna nunc vitae diam.

Donec in mi eros. Sed sed quam hendrerit, egestas sem vel, pharetra purus. Sed feugiat sed nulla sit amet fringilla. Duis dictum est et hendrerit molestie. Ut ac porttitor tellus. Sed eu sem egestas, convallis ipsum a, eleifend lorem. Vestibulum hendrerit lorem nec libero rhoncus, sed facilisis lacus viverra.

This is general body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue ante, placerat sed purus at, tempus suscipit justo. Phasellus rutrum molestie urna in feugiat. Donec vehicula tempor leo sit amet convallis. Proin tincidunt eros quis mollis venenatis. Vestibulum gravida, mauris at ornare fringilla, tellus metus pulvinar ligula, et commodo urna nunc vitae diam.

Donec in mi eros. Sed sed quam hendrerit, egestas sem vel, pharetra purus. Sed feugiat sed nulla sit amet fringilla. Duis dictum est et hendrerit molestie. Ut ac porttitor tellus. Sed eu sem egestas, convallis ipsum a, eleifend lorem. Vestibulum hendrerit lorem nec libero rhoncus, sed facilisis lacus viverra.

[toggle]

[toggle-item title="put your title here"]

Put your body here and copy and paste the line above and below for each toggle

[/toggle-item]

[/toggle]

Accordion

Accordions are very similar to Toggles but they only allow you to open one at a time. This is what is recommended for long FAQ's

This is general body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue ante, placerat sed purus at, tempus suscipit justo. Phasellus rutrum molestie urna in feugiat. Donec vehicula tempor leo sit amet convallis. Proin tincidunt eros quis mollis venenatis. Vestibulum gravida, mauris at ornare fringilla, tellus metus pulvinar ligula, et commodo urna nunc vitae diam.

Donec in mi eros. Sed sed quam hendrerit, egestas sem vel, pharetra purus. Sed feugiat sed nulla sit amet fringilla. Duis dictum est et hendrerit molestie. Ut ac porttitor tellus. Sed eu sem egestas, convallis ipsum a, eleifend lorem. Vestibulum hendrerit lorem nec libero rhoncus, sed facilisis lacus viverra.

This is general body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue ante, placerat sed purus at, tempus suscipit justo. Phasellus rutrum molestie urna in feugiat. Donec vehicula tempor leo sit amet convallis. Proin tincidunt eros quis mollis venenatis. Vestibulum gravida, mauris at ornare fringilla, tellus metus pulvinar ligula, et commodo urna nunc vitae diam.

Donec in mi eros. Sed sed quam hendrerit, egestas sem vel, pharetra purus. Sed feugiat sed nulla sit amet fringilla. Duis dictum est et hendrerit molestie. Ut ac porttitor tellus. Sed eu sem egestas, convallis ipsum a, eleifend lorem. Vestibulum hendrerit lorem nec libero rhoncus, sed facilisis lacus viverra.

[accordion]

[accordion-item title="put your title here"]

Put your body here and copy and paste the line above and below for each toggle

[/accordion-item]

[/accordion]

Tabs

Tabs are another way to present quite a bit of information on a page

This format can also contain the other functionality presented here such as tables, accordions, toggles and buttons. They behave just like the regular body

[tabs]

[tab-item title="Tab Title"]

Body text - Copy the line above through the line below and paste for additional tabs

[/tab-item]

[/tabs]

This is general body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue ante, placerat sed purus at, tempus suscipit justo. Phasellus rutrum molestie urna in feugiat. Donec vehicula tempor leo sit amet convallis. Proin tincidunt eros quis mollis venenatis. Vestibulum gravida, mauris at ornare fringilla, tellus metus pulvinar ligula, et commodo urna nunc vitae diam.

Donec in mi eros. Sed sed quam hendrerit, egestas sem vel, pharetra purus. Sed feugiat sed nulla sit amet fringilla. Duis dictum est et hendrerit molestie. Ut ac porttitor tellus. Sed eu sem egestas, convallis ipsum a, eleifend lorem. Vestibulum hendrerit lorem nec libero rhoncus, sed facilisis lacus viverra.

There are a few more, less used features available on https://www.njc.edu/njc-website-shortcode-style-guide