Skip to main content

“Then Jesus, filled with the power of the Spirit, returned to Galilee.” — Luke 4:14

Styleguide

For more information:

(800) 728-7228
Send email

Or write to
100 Witherspoon Street
Louisville, KY 40202

Bootstrap tabs

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>

Bootstrap grids

Grids need to be wrapped in a div class of row. An example would be:

<div class="row">
<div class="col-md-6">Column 1, half of page</div>
<div class="col-md-6">Column 2, half of page</div>
</div>

See more examples at https://getbootstrap.com/docs/3.3/examples/grid/


Font

Heading font = Clarendon Text Pro

Body font = Canada Type Gibson


This is an H1 style

This is an H2 style

This is an H3 style

This is an H4 style

This is an H5 style
This is an H6 style

Color Palette

Light Blue #89C3E1 Light Blue

This color is used within the navigation links and footer headers.

Medium blue: #0d88d5 Medium Blue

This color is used as the default blue background for grid blocks.

Dark blue: #1a438a Dark Blue

This color is used as the default blue text for white buttons on focus, blue backgrounds on sidebar navigation and modals, and masthead background.

Dark blue: #122e5f Complementary dark blue

This color is used as the complimentary blue on sidebar navigation.

Dark blue: #093259 Complementary dark blue

This color is used as a complimentary blue on sidebars.

Light Gray #a5acb2 Light Gray

This color is used for breadcrumbs, captions, news story categories, and upcoming event dates.

Dark Gray #788085 Light Gray

This color is used for gray buttons and taxonomy text.

Black #242424 Black

This color is used for body text.

Red #EA1921 Red

This color is used for form submit buttons, masthead announcement background, and map markers.

Dark red #bf1118 Red

This color is used for form submit buttons on focus.


Responsive video classes

<!-- 21:9 aspect ratio -->

<div class="embed-responsive embed-responsive-21by9">

  <iframe class="embed-responsive-item" src="..."></iframe>

</div>

 

<!-- 16:9 aspect ratio -->

<div class="embed-responsive embed-responsive-16by9">

  <iframe class="embed-responsive-item" src="..."></iframe>

</div>

 

<!-- 4:3 aspect ratio -->

<div class="embed-responsive embed-responsive-4by3">

  <iframe class="embed-responsive-item" src="..."></iframe>

</div>

 

<!-- 1:1 aspect ratio -->

<div class="embed-responsive embed-responsive-1by1">

  <iframe class="embed-responsive-item" src="..."></iframe>

</div>


 

This is an ordered list

  1. First Item
  2. Second Item
  3. Third Item

This an unordered list

  • First item
  • Second item
  • Third item

Horizontal rules default to a small, 1 grid-width gray line


Gray ghost button (class is hallow-btn-gray)

Button text here

White ghost button-hover to see button (class is hallow-btn-white)

Button text here


Dark text on light background (color: #242424)

Use class="dark-text-on-light"

Light text on dark background

Use class="light-text-on-dark

Blockquote displayed here

Gray content area (class="gray-content-area")

In sunt kevin jerky porchetta flank consectetur excepteur biltong cupim. Pork loin porchetta prosciutto, ea tenderloin dolor meatball ut pork ipsum labore shankle. Pastrami kevin ut non biltong. Turducken rump fugiat, biltong lorem do labore porchetta adipisicing mollit magna dolore beef ribs kevin. Dolore aliqua incididunt adipisicing strip steak culpa. Voluptate quis jerky, tempor in shankle elit veniam do picanha lorem magna salami.

Panels

Panel heading without title
Panel content

Panel title

Panel content

Carousel image

Image size should be 2000 x 570 px

Featured News image

Image size should be 800 X 400 px

Alternate News image

Image size should be 2000 X 450 px

Events

Image size: 
400 X 250 px
Image style is no longer required

Excerpt
No more than 2 lines of text.
No links

External URL
Use this as a redirect only.

Location
Use two character state abbreviation

News Story image styles:

.insertright486 { width: 504px; float:right; margin: 5px 5px 15px 15px;}

.insertright424 { width: 442px; float:right; margin: 5px 5px 15px 15px;}

.insertright400 { width: 418px; float:right; margin: 5px 5px 15px 15px;}

.insertright350 { width: 368px; float:right; margin: 5px 5px 15px 15px;}

.insertright300 { width: 318px; float:right; margin: 5px 5px 15px 15px;}

.insertright275 { width: 293px; float:right; margin: 5px 5px 15px 15px;}

.insertright264 { width: 282px; float:right; margin: 5px 5px 15px 15px;}

.insertright250 { width: 268px; float:right; margin: 5px 5px 15px 15px;}

.insertright230 { width: 248px; float:right; margin: 5px 5px 15px 15px;}

.insertright200 { width: 218px; float:right; margin: 5px 5px 15px 15px;}

.insertright150 { width: 168px; float:right; margin: 5px 5px 15px 15px;}

.insertright144 { width: 162px; float:right; margin: 5px 5px 15px 15px;}

.insertright100 { width: 118px; float:right; margin: 5px 5px 15px 15px;}

.insertright96 { width: 114px; float:right; margin: 5px 5px 15px 15px;}

.insertright80 { width: 98px; float:right; margin: 5px 5px 15px 15px;}

.insertleft486 { width: 504px; float:left; margin: 5px 15px 15px 5px;}

.withinsertleft486 { float: left; width: 172px; }

.insertleft450 { width: 468px; float:left; margin: 5px 15px 15px 5px;}

.insertleft424 { width: 442px; float:left; margin: 5px 15px 15px 5px;}

.insertleft400 { width: 418px; float:left; margin: 5px 15px 15px 5px;}

.insertleft400 { width: 418px; float:left; margin: 5px 15px 15px 5px;}

.insertleft350 { width: 368px; float:left; margin: 5px 15px 15px 5px;}

.insertleft300 { width: 318px; float:left; margin: 5px 15px 15px 5px;}

.insertleft275 { width: 293px; float:left; margin: 5px 15px 15px 5px;}

.insertleft264 { width: 282px; float:left; margin: 5px 15px 15px 5px;}

.insertleft250 { width: 268px; float:left; margin: 5px 15px 15px 5px;}

.insertleft230 { width: 248px; float:left; margin: 5px 15px 15px 5px;}

.insertleft200 { width: 218px; float:left; margin: 5px 15px 15px 5px;}

.insertleft150 { width: 168px; float:left; margin: 5px 15px 15px 5px;}

.insertleft144 { width: 162px; float:left; margin: 5px 15px 15px 5px;}

.insertleft100 { width: 118px; float:left; margin: 5px 15px 15px 5px;}

.withinsertleft144 { float: left; width: 514px; }

.insertleft96 { width: 114px; float:left; margin: 5px 15px 15px 5px;}

.withinsertleft96 { float: left; width: 562px; }

.insertleft80 { width: 98px; float:left; margin: 5px 15px 15px 5px;}

.withinsertleft80 { float: left; width: 578px; }

.photo590 { margin: 5px 0; width: 590px; }

.photo1000 { margin: 5px 0; width: 1000px; }

Tags: