Skip to Main Content
Carolina Housing

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
  1. Ordered list item one
  2. Ordered list item two
  3. 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

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
  1. Ordered list item one
  2. Ordered list item two
  3. 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.


2-column 60-40 (image-right)

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.


2-Column 50/50 (text only)

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.

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.


2-Column 50/50 (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.


2-Column 50/50 (image right)

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.


Sharing and printing options:
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram