Colors

Fonts

Lawrence-Regular

Muli

Bebas Neue

Headings

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Paragraph

Blockquote

<h1>Heading One</h1>

<h3>Heading Two</h3>

<h3>Heading Three</h3>

<h4>Heading Four</h4>

<h5>Heading Five</h5>

<h6>Heading Six</h6>

<p>Paragraph</p>

<blockquote>Blockquote</blockquote>

Buttons

Create a button by applying one of the button styles to a link.

Click Me
Click Me

Click Me

<a class="btn" href="/">Click Me</a>

<a class="btn orange-bg" href="/">Click Me</a>

<a class="btn white" href="/">Click Me</a>

Banner Images

Banner images are going to automatically be centered horizontally and vertically into an area that has an aspect ratio of roughly 347:99. The image below shows the aspect ratio and example width and height of the "visible" area within the banner. If your image is taller than the area, there will be some cropping above and below the "visible area" in order to make it fit. It is best to make sure that whatever you want focused on is in the center of the image.

Grid Classes

The SCI Site is built using a system known as flexbox. This system has a series of classes that create a 12 column grid. This grid can be used to change the layout of content. Follow the chart below to better understand how these classes work.

col-xs-12

col-xs-6

col-xs-4

col-xs-3

col-xs-2

<div class="row"> </div>

<div class="col-xs-12"></div>

<div class="col-xs-6"></div>

<div class="col-xs-4"></div>

<div class="col-xs-3"></div>

<div class="col-xs-2"></div>

</div>

Responsive

Sometimes you will want to change the width of content on different breakpoints, in order to do so just change out the xs, which means extra small, with sm, md, or lg. So for this example, we are telling two containers to be full width until they get to the desktop size, then they will be two column.