ECSU

Style Guide

Navigation updated for style guide use.

Color Pallete

Primary

Blue
Hex: #0039A6

White
Hex: #FFFFFF

Secondary

Red
Hex: #B71234

Grey
Hex: #B1B9B7

Medium Grey
Hex: #939395

Black
Hex: #000000

Headings

Default

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Utility Classes

Text

Paragraphs

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

Links

Anchor Link Default

List Groups

An item
A second item
A third item
A fourth item
And a fifth one

Text Sizing

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Bootstrap Documentation

Text Color Classes

Default Text Color
.font-color-blue
.font-color-red
.font-color-black
.font-color-white

Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

Bootstrap Documentation

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Bootstrap Documentation

Buttons

Three button classes: btn-primary, btn-secondary, and btn-tertiary.

Button Primary Button Secondary Button Tertiary

Group Orientation

Horiztonal

Button Button Button

Vertical

Button Button Button

Button Grouping Documentation

Group a series of buttons together on a single line or stack them in a vertical column.

Bootstrap Documentation

Background Colors

Classes can be placed on any element, but are primarily used on sections.

.bg-color-blue
.bg-color-red
.bg-color-dark
.bg-color-gradient-grey-white

section (.bg-color-blue)

section (.bg-color-red)

section (.bg-color-gradient-grey-white)

section (.bg-color-grey)

Hero Banners (page top)

Recommended background image dimensions: 1920x800px

Hero Format 1 Hero Format 2 Hero Format 3 Hero Format 4

Heading Formats

Remember to use the .h1-h6 classes on the subheading containers to increase or decrease the font size.

Heading-Format-1: Default

Subheading Text

Heading Format-1.

Heading-Format-1: data-bg-dark="true"

Subheading Text

Heading Format-1.

Heading-Format-2: Default

Subheading Text

Heading Format-2.

Heading-Format-2: data-bg-dark="true"

Subheading Text

Heading Format-2.

Images Grid

Required Image dimensions:

1 image @ 330x400px
2 images @ 330x200px

Card Format 1

1-Card

Card Title

2-Cards

Card Title

3-Cards

Card Title

4-Cards

Card Title

5-Cards

Card Title

Card Format 2

1-Card

Hands-on Experience

Gain real-world experience with committed instructors at an airport just 1.5 miles away from campus.

Example 1

2-Cards

Card Format 2 Title