Component Library

Type Styles

These are the typographic styles available when working with text. Many components have preset typographic styles that can serve as a good reference when setting headlines, sub-headlines, paragraph text, or captions. 
 

H2 – The quick brown fox jumps

H3 – The quick brown fox jumps

H4 – The quick brown fox jumps

H5 – The quick brown fox jumps

H6 – The quick brown fox jumps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt amet urna a porta lobortis. Aliquam sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit. Mauris eget velit bibendum, auctor risus eu, elementum sem. In-line link, bibendum in efficitur ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt amet urna a porta lobortis. Aliquam sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit. Mauris eget velit bibendum, auctor risus eu, elementum sem. In-line link, bibendum in efficitur ut.

Font Styles & Colors

The sans-serif Galaxie Polaris is the primary font family for the York website. Below are the pixel sizes and HEX colors for easy reference.

H2 – 48 px, 348338

H3 – 36 px, 348338

H4 – 28 px, 154C26 

H5 – 22 px, 348338

H6 – 16 px, 154C26

Paragraph - 16 px, 14C26

The official colors of the York College logo are Pantone 7740 or black. When using Pantone 7740 is not possible, the following color builds should be used to obtain the best match for “York College green.” 

View Our Brand Guidelines

On Screen

• RGB: 91.153.68
• HEX: 239A3A

Variations of York College Green

For accessibility and usability, we have incorporated variations of the York College green throughout the website. These colors are for digital design purposes only and are not to be incorporated into print pieces.

• HEX: 154c26 (darker green)
• HEX: 348338 
• HEX: 8bc700 (lighter green)
• HEX: 3a913f 

Image

Hero Component Overview

This component's main function is to occupy the top section of a page, immediately captivating the viewer upon their initial navigation to the page. Its components include a Title, Header Description text, Body Text, Image, and Links.

Hero Component: Full-Width Image

This component's main function is to occupy the top section of a page, immediately captivating the viewer upon their initial navigation to the page. This component features a full-width image.

Image

Hero Component: Full-Width Image with Headline 

This component's main function is to occupy the top section of a page, immediately captivating the viewer upon their initial navigation to the page. Its components include a Title, Header Description text, Body Text, Image, and Links.

Image

Hero Component: No Image 

This component's main function is to occupy the top section of a page, immediately captivating the viewer upon their initial navigation to the page. Its components include a Title, Header Description text, Body Text, and Links.

Image

WYSIWYG 

This component is used for full-width text content. It includes options for headlines, images, list-items and links.

Text Block Grid / Link List

The primary function of this component is to present content as individual cards of information. Each card contains a subheading, body copy/description, and a link. There are two available background colors to choose from: Light Grey and Green. There are two link options. You can link the title or add a button link at the bottom.

Card Grid

This component displays page information as cards. Each card includes a headline, short description and a link to the accompanying page.

Directory Grid

This component displays cards of quick contact information for faculty based on the department selected. The click-through page contains all supplied contact information, a biography text field, and the ability to add additional components to the page.  

Table

The table component uses the WYSIWYG component and includes an optional title, description, and link. 

Spacer

The spacer grid us used to add/remove space between components. Positive values (50px) will add space, and negative values (-50pc); will remove space.