Kent State Is Ohio's Best University

Modals can contain special formatting.

You can dismiss the modal window by clicking the X.

×

Web Pattern Library

The Kent State University Web Pattern Library, provided by University Communications and Marketing, is a collection of web patterns and code snippets that you can use to inform and guide your web site's design. If you're using Drupal, many of these patterns are already available to you. If you're developing a website or application outside of Drupal, you can use these code snippets on your website.

The Kent State Pattern Library uses SASS, GitHub and Zurb Foundation v4. For more detailed information, see our Guide to Web Standards.


Templates for Prototyping

If you like rapid prototyping, you can download our Kent State rapid prototyping templates from GitHub. These templates are not intended for production use, but feel free to use them for demonstration purposes.

Download on GitHub

Prototype Page Samples


Global Header Guidelines

You must either use the SVG version of the logo, with a PNG fallback version, or use the 2X version downscaled to 50% in order to support high-density displays.

Global Header (Blue)

Show CSS
  			
background-image:-moz-linear-gradient(14% 14% -90deg, rgb(0,33,71) 0%,rgb(0,39,81) 21%,rgba(0,60,120,0.96) 100%);
background-image:-webkit-gradient(linear,14% 14%,14% 86%,color-stop(0, rgb(0,33,71)),color-stop(0.21, rgb(0,39,81)),color-stop(1, rgba(0,60,120,0.96)));
background-image:-webkit-linear-gradient(-90deg,rgb(0,33,71) 0%,rgb(0,39,81) 21%,rgba(0,60,120,0.96) 100%);
background-image:-o-linear-gradient(-90deg,rgb(0,33,71) 0%,rgb(0,39,81) 21%,rgba(0,60,120,0.96) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(0,33,71) 0%,rgb(0,39,81) 21%,rgba(0,60,120,0.96) 100%);
background-image:linear-gradient
(180deg,rgb(0,33,71) 0%,rgb(0,39,81) 21%,rgba(0,60,120,0.96) 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient
(startColorstr=#ff002147,endColorstr=#f4003c78,GradientType=0)";

White Logo Files


Global Header (Neutral)

Show CSS
  			
background-image:-moz-linear-gradient(14% 1% -90deg,rgb(255,255,255) 11%,rgb(247,247,247) 55%,rgba(238,238,238,0.93) 100%)
background-image:-webkit-gradient(linear,14% 1%,14% 94%,color-stop(0.11, rgb(255,255,255)),color-stop(0.55, rgb(247,247,247)),color-stop(1, rgba(238,238,238,0.93)))
background-image:-webkit-linear-gradient(-90deg,rgb(255,255,255) 11%,rgb(247,247,247) 55%,rgba(238,238,238,0.93) 100%)
background-image:-o-linear-gradient(-90deg,rgb(255,255,255) 11%,rgb(247,247,247) 55%,rgba(238,238,238,0.93) 100%)
background-image:-ms-linear-gradient(-90deg,rgb(255,255,255) 11%,rgb(247,247,247) 55%,rgba(238,238,238,0.93) 100%)
background-image:linear-gradient(180deg,rgb(255,255,255) 11%,rgb(247,247,247) 55%,rgba(238,238,238,0.93) 100%)
-ms-filter:"progid:DXImageTransform.Microsoft.gradient
(startColorstr=#ffffffff,endColorstr=#edeeeeee,GradientType=0)"
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#ffffffff,
endColorstr=#edeeeeee,GradientType=0)

Blue Logo Files


Global Footer

The "fat footer" commonly repeats the top navigation in list format. Optional Quick Links are placed to the right. The footer also houses social media icons and contact information.

About

  • Administration
  • Alumni
  • Centers & Institutes

Academics

  • Administration
  • Alumni
  • Centers & Institutes
Phone

330-672-3000

Address

800 East Summit Street, Kent, Ohio 44242

Email

info@kent.edu


Colors

Primary Colors

Kent State Blue and Kent State Gold may be used at 50% and 30% opacity.

rgb(0,38,100)
PMS 281
#002664
rgb(234,171,0)
PMS 124
#eaab00

Neutral Colors

Black
rgb(0,0,0)
PMS Black
#00000
Warm Neutral Grays
rgb(224,222,217)
Warm Gray 1C
#e0ded9
rgb(199,194,186)
Warm Gray 3C
#c7c2bc
rgb(174,167,159)
Warm Gray 5C
#afa79f
rgb(139,129,120)
Warm Gray 8C
#8b8078
Cool Gray (Web Only)
rgb(115,115,115)
Cool Gray
#737373

Accent Colors

Accent colors may be used on no more than 20% of the page.
Dark Blue Accent
rgb(0,33,71)
PMS 282
#002147
Dark Gold Accent
rgb(211,145,0)
PMS 7550C
#d39100
Cyan Accent
rgb(0,157,216)
PMS Cyan
#009ddb
Bright Gold Accent
rgb(255,200,46)
PMS 123
#ffc82e
Green
rgb(135,150,55)
Green 7495C
#879637
Dark Green
rgb(91,99,52)
Dark Green 5753C
#5b6334
Purple
rgb(110,44,107)
Purple 255C
#6e2c6b
Teal
rgb(88, 145, 153)
Teal 5483C
#589199
Orange
rgb(197, 76, 0)
Orange 1525C
#c54c00
Brown
rgb(106, 73, 28)
Brown 1405C
#6a491c
Red
rgb(158, 48, 57)
Red 1807C
#9e3039
Maroon
rgb(136, 35, 69)
Maroon 208C
#9e2345

Color Palettes

Traditional
rgb(0,38,100)
PMS 281
#002664
rgb(234,171,0)
PMS 124
#eaab00
rgb(174,167,159)
Warm Gray 5C
#afa79f
Bright
rgb(66,109,169)
Alt Blue (Web Only)
#426da9
rgb(234,171,0)
PMS 124
#eaab00
rgb(199,194,186)
Warm Gray 3C
#c7c2bc
Gray with Accent
rgb(115,115,115)
Cool Gray
#737373
Choice of Primary Color or
Accent Color (See Above)
rgb(199,194,186)
Warm Gray 3C
#c7c2bc
Show SASS Variables
$ksu-blue: rgb(0,38,100); // #002663 and PMS 281 // $ksu-gold: rgb(234,171,0); // #ECAC00 and PMS 124 // $dark-blue: rgb(0,33,71); // #002147 and PMS 282 // $dark-gold: rgb(211,145,0); // #d39100 and PMS 7550 C // $cyan: rgb(0,157,216); // #009ddb and PMS Cyan // $bright-yellow: rgb(255,200,46); // #ffc82e and PMS 123C // $cool-gray: rgb(115,115,115); // #EEEEEE and Cool Gray // $warm-gray-1: rgb(224,222,217); // #e0ded9 and Warm Gray 1C // $warm-gray-3: rgb(199,194,186); // #c7c2bc and Warm Gray 3C // $warm-gray-5: rgb(174,167,159); // #afa79f and Warm Gray 5C // $warm-gray-8: rgb(139,129,120); // #8b8078 and 8C // $black: rgb(0,0,0); // #000000 // $green: rgb(135,150,55); // #879637 and PMS 7495C // $dark-green: rgb(91,99,52); // #5B6334 and PMS 5753C // $purple: rgb(110,44,107); // #6e2c6b and PMS 255C // $teal: rgb(88,145,153); // #589199 and PMS 5483C // $orange: rgb(197,76,0); // #c54c00 and PMS 1525C // $brown: rgb(106,73,28); // #6a491c and PMS 1405C // $red: rgb(158,48,57); // #9e2345 and PMS 208C // $maroon: rgb(136, 35,69); // #9e2345 and PMS 208C // $alt-blue: rgb(66, 109, 169); // #426da9//

Button Group

Button Groups are commonly used on top-level landing pages, and gently drop down to a section on the page

Show Markup
  			
<ul class="button-group even-6"> <li><a href="#" class="button">About Us</a></li> <li><a href="#" class="button">Faculty</a></li> <li><a href="#" class="button">Students</a></li> <li><a href="#" class="button">Alumni</a></li> <li><a href="#" class="button">Staff</a></li> <li><a href="#" class="button">Grad Students</a></li> </ul>

Pagination


Sidebar Navigation


Global Navigation


Breadcrumbs


Action Links


Visit Campus Today

Read More Link

To ensure proper accessibility, Read More links must always describe the context to which they're linking.
Read More About Our Programs

Horizontal Tabs

By default, section elements will be an accordion on mobile and tabs on desktops and tablets.
Section 1
Section 2
Section 3

One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies.

Second panel content goes here...

Third panel content goes here...

Show Markup
<div class="section-container auto" data-section> <section class="active"> <p class="title" data-section-title><a href="#panel1">Section 1</a></p> <div class="content" data-section-content> <p>One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies.</p> </div> </section> <section> <p class="title" data-section-title><a href="#panel2">Section 2</a></p> <div class="content" data-section-content> <p>Content of section 2.</p> </div> </section> </div>

Accordions

Adding an accordion class to the section container will show an accordion on both small and large screens.
Accordion 1
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Accordion 2
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Accordion 3
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Show Markup
<div class="section-container accordion" data-section="accordion"> <section class="active"> <p class="title" data-section-title><a href="#">Section 1</a></p> <div class="content" data-section-content> <p>One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies.</p> </div> </section> <section> <p class="title" data-section-title><a href="#">Section 2</a></p> <div class="content" data-section-content> <p>Content of section 2.</p> </div> </section> </div>

Vertical Tabs

Adding a vertical-tabs class to the section container and setting data-section="vertical-tabs" will enable tabs on both small and large screens.
Tab 1
Tab 2
Tab 3
Tab 4

One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies.

Panel 2 content goes here.

Panel 3 content goes here.

Panel 4 content goes here.


Show Markup
<div class="section-container vertical-tabs" data-section="vertical-tabs"> <section class="active"> <p class="title" data-section-title><a href="#">Section 1</a></p> <div class="content" data-section-content> <p>One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies.</p> </div> </section> <section> <p class="title" data-section-title><a href="#">Section 2</a></p> <div class="content" data-section-content> <p>Content of section 2.</p> </div> </section> <section> <p class="title" data-section-title><a href="#">Section 3</a></p> <div class="content" data-section-content> <p>Content of section 3.</p> </div> </section> </div>

Typography

Fonts

Show SASS Variables
  		
$serif: "adobe-garamond-pro", Georgia, serif; $sans-serif: "tablet-gothic", Helvetica, Arial, sans-serif; $sans-serif-condensed: "tablet-gothic-semi-condensed", Helvetica, Arial, sans-serif; $slab-serif: "museo-slab", Georgia, serif;

Tablet Gothic (Body Copy)

Font-Family Font-Weight Font-Style
"tablet-gothic" 400 normal
"tablet-gothic" 400 italic
"tablet-gothic" 600 normal

Adobe Garamond Pro

Font-Family Font-Weight Font-Style
"adobe-garamond-pro" 400 normal
"adobe-garamond-pro" 400 italic
"adobe-garamond-pro" 700 normal

Tablet Gothic Semi-Condensed

Font-Family Font-Weight Font-Style
"tablet-gothic-semi-condensed" 400 normal
"tablet-gothic-semi-condensed" 600 normal
"tablet-gothic-semi-condensed" 700 normal

Museo Slab

Font-Family Font-Weight Font-Style
"museo-slab" 300 normal
"museo-slab" 500 normal

Embedding Fonts

In order to use Kent State's official fonts, you must embed the following two lines of JavaScript into the HEAD of custom websites. These fonts are included by default in Kent State's official templates. These fonts may only be used on "kent.ed"u" servers and localhost for development.

Show JavaScript
<script type="text/javascript" src="//use.typekit.net/oct1xai.js">/<script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Alternate Fonts

For Kent State websites that are hosted on third party servers (non kent.edu servers), alternate, free Google fonts may be used in place of the approved official university fonts.


Large Titles

This is the Home Page Headline Title

This is a Sub Header


Body Copy Headings

H1 is reserved for the page title. H2 - H6 are available for formatting body copy

h1. This is a Very Large Header

h2. This is a Large Header

h3. This is a Medium Header

h4. This is a Moderate Header

h5. This is a Small Header
h6. This is a Tiny Header


Introductory Paragraph

This is an introductory paragraph. Introductory paragraphs appear in a condensed font, with slightly larger type and colored cool-gray.


Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap around type to make it bold!. You can also italicize your words.


Links

Links are very standard, and are bolded, with an accent color to set them apart from regular text.


Quotes

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
Show Markup
  			
<blockquote> I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. <cite>Isaac Asimov</cite> </blockquote>

Captions

Kent State Students walk to class on a summer day, near Risman Plaza.

Show Markup
  			
<p class="caption">Kent State Students walk to class on a summer day, near Risman Plaza.</p>

Buttons

Standard Buttons and Calls to Action

Small buttons are used most commonly, while larger buttons are reserved for more important actions. Calls to action are only available for use on home pages.
Small Button
Medium Button with Arrow
Medium Button with Arrow
Large Button
Large Button With Icon
Call to Action

Tables

Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here
Show Markup
  			
<table> <thead> <tr> <th>Table Header</th> <th>Table Header</th> <th>Table Header <th>Table Header</th> </tr> </thead> <tbody> <tr> <td>Content Goes Here</td> <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td> <td>Content Goes Here</td> <td>Content Goes Here</td> </tr> </tbody> </table>

Lists

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 1
  5. List Item 2
  6. List Item 3

Unordered (Bulleted) Lists

Show Markup
  			
<ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol>
<ul> <li>List Item 1</li> <ul> <li>Sub List 1</li> <li>Sub List 2</li> </ul> <li>List Item 2</li> <li>List Item 3</li> </ul>

Alerts and Panels

Modal Windows

Modals can be set to "tiny", "small", "medium", "large" and "xlarge" classes.
Click Me For A Modal
Show Markup

Alert Box

The Kent Campus Is Closed Today ×
Show Markup
  			
<div data-alert class="alert-box"> The Kent Campus Is Closed Today <a href="#" class="close">×</a> </div>

Panels

This is a great way to call out information.
Show Markup
  		
<div class="panel">This is a great way to call out information.</div>

Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page.

Show HTML
  		
<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

Icons

Kent State Websites use the icon fonts from Font Awesome. Font Awesome allows you to embed scaleable, high-quality icons on your website and within buttons. Visit Font Awesome to learn more.

Frequently Used Icons

fa-arrow-circle-o-right
fa-check-square
fa-calendar
fa-caret-right
fa-play-circle-o
fa-twitter-square
fa-facebook-square
fa-google-plus-square
fa-tumblr-square
fa-linkedin-square
fa-foursquare
fa-youtube-square
fa-pinterest
fa-instagram
fa-flickr

Show Markup
  			
<i class="fa fa-camera-retro"></i>

Images/Videos

Image Sliders

Show Markup
  			
<ul data-orbit> <li> <img src="../img/demos/demo1.jpg" /> <div class="orbit-caption">...</div> </li> <li> <img src="../img/demos/demo2.jpg" /> <div class="orbit-caption">...</div> </li> <li> <img src="../img/demos/demo3.jpg" /> <div class="orbit-caption">...</div> </li> </ul>

Image Gallery With Lightbox

Show Markup

Left Aligned Elements

President Warren

This is the caption

One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies. When you invest your willingness and hard work, Kent State offers academic support, real-world experience, a diverse and inclusive campus culture and the philosophy that new ideas matter. Combine that with a strong liberal arts foundation, and you will join the nearly 200,000 alumni who have made a difference worldwide. One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies. When you invest your willingness and hard work, Kent State offers academic support, real-world experience, a diverse and inclusive campus culture and the philosophy that new ideas matter. Combine that with a strong liberal arts foundation, and you will join the nearly 200,000 alumni who have made a difference worldwide.

Right Aligned Elements

President Warren

This is the caption

One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies. When you invest your willingness and hard work, Kent State offers academic support, real-world experience, a diverse and inclusive campus culture and the philosophy that new ideas matter. Combine that with a strong liberal arts foundation, and you will join the nearly 200,000 alumni who have made a difference worldwide. One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies. When you invest your willingness and hard work, Kent State offers academic support, real-world experience, a diverse and inclusive campus culture and the philosophy that new ideas matter. Combine that with a strong liberal arts foundation, and you will join the nearly 200,000 alumni who have made a difference worldwide.

Center Aligned Elements

President Warren

This is the caption

One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies. When you invest your willingness and hard work, Kent State offers academic support, real-world experience, a diverse and inclusive campus culture and the philosophy that new ideas matter. Combine that with a strong liberal arts foundation, and you will join the nearly 200,000 alumni who have made a difference worldwide. One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies. When you invest your willingness and hard work, Kent State offers academic support, real-world experience, a diverse and inclusive campus culture and the philosophy that new ideas matter. Combine that with a strong liberal arts foundation, and you will join the nearly 200,000 alumni who have made a difference worldwide.

Inline Videos

If you're embedding a video from YouTube, Vimeo, or another site that uses iframe, embed or object elements, you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.

This is the caption

One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies. When you invest your willingness and hard work, Kent State offers academic support, real-world experience, a diverse and inclusive campus culture and the philosophy that new ideas matter. Combine that with a strong liberal arts foundation, and you will join the nearly 200,000 alumni who have made a difference worldwide. One of Ohio’s best universities, Kent State is accessible financially and academically to many students. Its proximity to major metropolitan areas puts students within reach of world-class dining, museums and Fortune 500 companies. When you invest your willingness and hard work, Kent State offers academic support, real-world experience, a diverse and inclusive campus culture and the philosophy that new ideas matter. Combine that with a strong liberal arts foundation, and you will join the nearly 200,000 alumni who have made a difference worldwide.

Show Markup
  			
<div class="align-left"> <div class="flex-video"><iframe width="500px" height="500" src="https://www.youtube.com/embed/x-Cyyfnr1nI" frameborder="0" allowfullscreen></iframe></div> <p class="caption">This is the caption</p> </div>

Forms

Show Markup
  			
<form> <div class="row"> <div class="large-6 columns"> <div class="row collapse"> <div class="small-10 columns"> <input type="text" placeholder="Your Email Address"> </div> <div class="small-2 columns"> <a href="#" class="button prefix">Submit</a> </div> </div> </div> </div> </form>