Design Library

This page is a guide for site builders to show the different custom SAIT layout elements available to content editors using the Gutenberg Editor.

Header Styles

Header styles are to convey importance within the document, rather than size on the page. Note that the page title always uses the h1 tag, so it is not available as a choice.

h2 - Section Heading

h3 - Subhead below h2

h4 - Subhead below h3

Paragraphs and Lists

This is an example of normal paragraph text, which can by styled bold, italic, ~~strike-through~~, ^superscript, _subscript, or in color.

Unordered list item one
Unordered list item two
Unordered list item three

Ordered list item one
Ordered list item two
Ordered list item three

UNC Approved Colors

These colors are available in the right-hand sidebar under "Color Settings", which will apply to the whole block of text. Please use restraint with colors, and follow the University's color guidelines whenever possible.

Carolina Blue

Navy Blue

Dark Gray

Basin Slate

Davie Green

Campus Sandstone

Longleaf Pine

Azalea Pink

Tile Teal

Sunshine Yellow

Black

White

Font Awesome Icons

To use a Font Awesome icon, follow these instructions:

First enter your text as normal, then click the 3 dots that appear on hover and select "Edit as HTML". Where you would like the icon to show, add a span with the classes shown below:

<span class="fa fa-archway"></span> My text here

Result:

My text here

Buttons

Buttons can be modified by going to the "Advanced" dropdown on the right side of the page when a button is selected, and adding a classname to the "Additional CSS classes" field. Choices are:

sait-btn-dark
sait-btn-slate

Standard Button

Dark Button

Slate Button

Toggle / FAQ

Question

Use of bold, italic, underline and other styling will work as expected. Here are some examples:

Normal Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Indented text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Centered Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Justified Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Unordered list item one
Unordered list item two
Unordered list item three

Ordered list item one
Ordered list item two
Ordered list item three

AVAILABLE LAYOUTS

These layouts are built to help make pages more visually interesting, and can be inserted anywhere on a page.

2-column 40-60 (image-left)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et malesuada fames ac turpis egestas maecenas. Tempus imperdiet nulla malesuada pellentesque. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Ut eu sem integer vitae justo eget magna fermentum.