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.

Guide to Web Standards

Tools for Third Parties and Developers

If you're a third party developer working with Kent State to develop a web application outside of Drupal, you may find the following items to be helpful:

Templates for Prototyping
Official Kent State Header/Logo
Approved Color Palettes
Approved Web Fonts

Templates for Prototyping

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

Download on GitHub

Prototype Page Samples

Patchwork (Demonstrates Most Styles Together)
Landing Page
Note: The landing page template is not currently available for use in Drupal, but a template will be made available in the near future. Until then, please do not use the styles found in this demonstration page.

HTML Email Templates

Want to send out a Kent State email? Use this HTML starter template to help you get started. If you use MailChimp for your email marketing, we've made available an official Kent State MailChimp template below as well.

The Official Kent State Web Header

If you're looking to implement the Kent State header on a third-party website, you can download all of the markup and assets you need below.

Download Kent State Web Header

Header Guidelines

The header should be marked up in CSS only and not output as a bitmapped image.
The Kent State logo must link to www.kent.edu (except for regional campuses, which will link to the regional campus home page).
The Kent State logo should be one of the logos below. The Kent State web logo should never be converted into a different file format or altered in any way.
No elements may be added within or on top of the Kent State header, except the included Utility Links and Give to Kent image (see below)
While the HTML5 "header" element is more symantically correct than using a "div" element, header does not always play well with Internet Explorer 8, so we have used the less semantic version here.

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 Blue Header Markup

        
            <div class="header header-blue">
                    <a href="http://www.kent.edu/">
                        <div class="logo-white logo">
                            <span>Kent State University</span>
                        </div>
                    </a>
            </div>

Show Blue Header CSS

  			
.header {
  padding: 1.5em;
  margin: 0 auto;
  padding-top: 1.25em; 
  text-align: center;
}

.header a {
  width: 285px;
  display: block;
  margin: 0 auto;
}

.header-blue {
  background-color: #002664;
  background-image: -webkit-gradient(linear, 14% 14%, 14% 86%, color-stop(0, #002147), color-stop(0.21, #002751), color-stop(1, rgba(0, 60, 120, 0.96)));
  background-image: -webkit-linear-gradient(-90deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
  background-image: -webkit-linear-gradient(270deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
  background-image: linear-gradient(180deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002147,endColorstr=#f4003c78,GradientType=0)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002147,endColorstr=#f4003c78,GradientType=0);
}

.logo-white {
  background-image: url(../img/Kent-State-Logo-White-Fallback@1x.png);
  background-repeat: no-repeat; 
}

/* Retina-Quality White Logo */

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  .logo-white {
  background-image: url(../img/Kent-State-Logo-White-Fallback@2x.png);
  background-repeat: no-repeat; 
  background-size: 100%;
  }
}

.logo-blue span {
  display: block; 
  width: 0; 
  height: 0; 
  overflow: hidden;
}

.logo {
  height: 88px;
  width: 285px;
  background-size: 100%;
  margin: 0px auto; 
}


/* Small Screen Sizes */


@media screen and (max-width: 40em) {
  .header {
    padding-top: 0.75em;
  }

  .header a {
    height: 2.7em;
    margin: 0 auto;
    width: 10em;
  }

  .logo {
    width: 10em;
    margin-right:0;
    margin-left:0;
    margin: 0 auto;
    height: 3em;
  }
}

Blue Header Logo Files (White/Gold Logo)

Global Header (Blue) - With Utilities

Some web sites may require the use of the utility links and Give to Kent Sate. If you want to include these elements, use the markup below. The included links may not be modified.

Show Blue Header with Utilities Markup

        
       <div class="header header-blue">
        <div class="utility-links">
          <ul>
            <li><a href="http://login.kent.edu">FlashLine Login</a></li>
            <li><a href="http://www.kent.edu/calendars">Calendars</a></li>
            <li><a href="https://keys.kent.edu/ePROD/bwgkphon.p_viewpeopledirectory">Phone Directory</li>
            <li><a href="http://www.kent.edu/maps">Maps & Directions</a></li>
          </ul>
        </div>
        <div class="give-to-kent">
          <a href="http://www.kent.edu/advancement/givetokent"><img src="img/give.png" alt="Give to Kent State" /></a>
        </div>
        <a href="http://www.kent.edu/">
            <div class="logo-white logo">
                <span>Kent State University</span>
            </div>
        </a>
      </div>

Show Blue Header with Utilities CSS

        

// Official Header Markup //

.header {
  padding: 1.5em;
  margin: 0 auto;
  padding-top: 1.25em; 
  text-align: center;
  position: relative;
}

.header a {
  width: 285px;
  display: block;
  margin: 0 auto;
}

.header-blue {
  background-color: #002664;
  background-image: -webkit-gradient(linear, 14% 14%, 14% 86%, color-stop(0, #002147), color-stop(0.21, #002751), color-stop(1, rgba(0, 60, 120, 0.96)));
  background-image: -webkit-linear-gradient(-90deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
  background-image: -webkit-linear-gradient(270deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
  background-image: linear-gradient(180deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002147,endColorstr=#f4003c78,GradientType=0)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002147,endColorstr=#f4003c78,GradientType=0);
}

.logo-white {
  background-image: url(../img/Kent-State-Logo-White-Fallback@1x.png);
  background-repeat: no-repeat; 
}

/* Retina-Quality White Logo */

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  .logo-white {
  background-image: url(../img/Kent-State-Logo-White-Fallback@2x.png);
  background-repeat: no-repeat; 
  background-size: 100%;
  }
}

/* Retina-Quality Blue Logo */

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  .logo-blue {
  background-image: url(../img/Kent-State-Logo-Blue-Fallback@2x.png);
  background-repeat: no-repeat; 
  background-size: 100%;
  }
}

.logo-white span, .logo-blue span {
  display: block; 
  width: 0; 
  height: 0; 
  overflow: hidden;
}

.logo {
  height: 88px;
  width: 285px;
  background-size: 100%;
  margin: 0px auto; 
}

// Start Utility Links - Optional //

@media screen and (max-width: 40em) {
  .utility-links {
    display: none;
  }
}

.utility-links {
  font-family: "tablet-gothic-semi-condensed", "Arial Narrow", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  text-align: left;
}

.utility-links ul {
  margin-bottom: .5em;
  margin-left: 0;
  margin-top: -.3em;
  padding-left: 0;
}

.utility-links a {
  display: inline;
  text-decoration: none;
  font-weight: bold;
}

.header-blue .utility-links a {
  color: white;
}

.header-blue .utility-links ul li:first-child a {
  color: #eaab00;
}

.utility-links ul li {
  display: inline;
  font-size: .9em;
  margin-left: .5em;
}

.utility-links ul li:after {
    content:"|";
    margin-left: .6em;
}

.header-blue .utility-links ul li:after {
  color: white;
}

.utility-links ul li:last-child:after {
    content:"";
}

.utility-links ul li:before {
  content: none;
}

// Start Give to Kent - Optional //

.give-to-kent {
  float: right;
  position: absolute;
  top: -.2em;
  right: 0;
  transition: .3s all linear;
}

.give-to-kent img {
  width: 105px;
}

.give-to-kent:hover {
  top: 0;
}

/* Small Screen Sizes */


@media screen and (max-width: 40em) {
  .header {
    padding-top: 0.75em;
  }

  .header a {
    height: 2.7em;
    margin: 0 auto;
    width: 10em;
  }

  .logo {
    width: 10em;
    margin-right:0;
    margin-left:0;
    margin: 0 auto;
    height: 3em;
  }
}


@media screen and (max-width: 60em) {
  .give-to-kent {
    display: none;
  }
}

Blue Header Logo Files (White/Gold Logo) and Give to Kent

Global Header (Neutral)

Show White Header Markup

        
            <div class="header header-white">
                    <a href="http://www.kent.edu/">
                        <div class="logo-blue logo">
                            <span>Kent State University</span>
                        </div>
                    </a>
            </div>

Show White Header CSS

  			
.header {
  padding: 1.5em;
  margin: 0 auto;
  padding-top: 1.25em; 
  text-align: center;
}

.header a {
  width: 285px;
  display: block;
  margin: 0 auto;
}

.header-white {
  background-color: white;
  background-image: -webkit-gradient(linear, 14% 1%, 14% 94%, color-stop(0.11, #ffffff), color-stop(0.55, #f7f7f7), color-stop(1, rgba(238, 238, 238, 0.93))) !important;
  background-image: -webkit-linear-gradient(-90deg, #ffffff 11%, #f7f7f7 55%, rgba(238, 238, 238, 0.93) 100%);
  background-image: -webkit-linear-gradient(270deg, #ffffff 11%, #f7f7f7 55%, rgba(238, 238, 238, 0.93) 100%);
  background-image: linear-gradient(180deg, #ffffff 11%, #f7f7f7 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); 
}

.logo-blue {
  background-image: url(../img/Kent-State-Logo-Blue-Fallback@1x.png);
  background-repeat: no-repeat; 
}


/* Retina-Quality Blue Logo */

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  .logo-blue {
  background-image: url(../img/Kent-State-Logo-Blue-Fallback@2x.png);
  background-repeat: no-repeat; 
  background-size: 100%;
  }
}

.logo-white span, .logo-blue span {
  display: block; 
  width: 0; 
  height: 0; 
  overflow: hidden;
}

.logo {
  height: 88px;
  width: 285px;
  background-size: 100%;
  margin: 0px auto; 
}


/* Small Screen Sizes */


@media screen and (max-width: 40em) {
  .header {
    padding-top: 0.75em;
  }

  .header a {
    height: 2.7em;
    margin: 0 auto;
    width: 10em;
  }

  .logo {
    width: 10em;
    margin-right:0;
    margin-left:0;
    margin: 0 auto;
    height: 3em;
  }
}

White Header Logo Files (Blue/Gold Logo)

Global Header (Neutral) - With Utilities

Some web sites may require the use of the utility links and Give to Kent Sate. If you want to include these elements, use the markup below. The included links may not be modified.

Show White Header with Utilities Markup

        
        <div class="header header-white">
        <div class="utility-links">
          <ul>
            <li><a href="http://login.kent.edu">FlashLine Login</a></li>
            <li><a href="http://www.kent.edu/calendars">Calendars</a></li>
            <li><a href="https://keys.kent.edu/ePROD/bwgkphon.p_viewpeopledirectory">Phone Directory</li>
            <li><a href="http://www.kent.edu/maps">Maps & Directions</a></li>
          </ul>
        </div>
        <div class="give-to-kent">
          <a href="http://www.kent.edu/advancement/givetokent"><img src="img/give.png" alt="Give to Kent State" /></a>
        </div>
        <a href="http://www.kent.edu/">
            <div class="logo-blue logo">
                <span>Kent State University</span>
            </div>
        </a>
      </div>

Show White Header with Utilities CSS

        
// Official Header Markup //

.header {
  padding: 1.5em;
  margin: 0 auto;
  padding-top: 1.25em; 
  text-align: center;
  position: relative;
}

.header a {
  width: 285px;
  display: block;
  margin: 0 auto;
}

.header-white {
  background-color: white;
  background-image: -webkit-gradient(linear, 14% 1%, 14% 94%, color-stop(0.11, #ffffff), color-stop(0.55, #f7f7f7), color-stop(1, rgba(238, 238, 238, 0.93))) !important;
  background-image: -webkit-linear-gradient(-90deg, #ffffff 11%, #f7f7f7 55%, rgba(238, 238, 238, 0.93) 100%);
  background-image: -webkit-linear-gradient(270deg, #ffffff 11%, #f7f7f7 55%, rgba(238, 238, 238, 0.93) 100%);
  background-image: linear-gradient(180deg, #ffffff 11%, #f7f7f7 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); 
}

.logo-blue {
  background-image: url(../img/Kent-State-Logo-Blue-Fallback@1x.png);
  background-repeat: no-repeat; 
}


/* Retina-Quality Blue Logo */

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  .logo-blue {
  background-image: url(../img/Kent-State-Logo-Blue-Fallback@2x.png);
  background-repeat: no-repeat; 
  background-size: 100%;
  }
}

.logo-white span, .logo-blue span {
  display: block; 
  width: 0; 
  height: 0; 
  overflow: hidden;
}

.logo {
  height: 88px;
  width: 285px;
  background-size: 100%;
  margin: 0px auto; 
}


/* Small Screen Sizes */


@media screen and (max-width: 40em) {
  .header {
    padding-top: 0.75em;
  }

  .header a {
    height: 2.7em;
    margin: 0 auto;
    width: 10em;
  }

  .logo {
    width: 10em;
    margin-right:0;
    margin-left:0;
    margin: 0 auto;
    height: 3em;
  }
}


// Start Utility Links - Optional //

@media screen and (max-width: 40em) {
  .utility-links {
    display: none;
  }
}

.utility-links {
  font-family: "tablet-gothic-semi-condensed", "Arial Narrow", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  text-align: left;
}

.utility-links ul {
  margin-bottom: .5em;
  margin-left: 0;
  margin-top: -.3em;
  padding-left: 0;
}

.utility-links a {
  display: inline;
  text-decoration: none;
  font-weight: bold;
}

.header-white .utility-links a {
  color: #002664;
}

.header-white .utility-links ul li:first-child a {
  color: #426da9;
}

.utility-links ul li {
  display: inline;
  font-size: .9em;
  margin-left: .5em;
}

.utility-links ul li:after {
    content:"|";
    margin-left: .6em;
}

.utility-links ul li:last-child:after {
    content:"";
}

.utility-links ul li:before {
  content: none;
}

// Start Give to Kent - Optional //

.give-to-kent {
  float: right;
  position: absolute;
  top: -.2em;
  right: 0;
  transition: .3s all linear;
}

.give-to-kent img {
  width: 105px;
}

.give-to-kent:hover {
  top: 0;
}

@media screen and (max-width: 60em) {
  .give-to-kent {
    display: none;
  }
}

Blue Header Logo Files (Blue/Gold Logo) and Give to Kent

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.

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//

Typography

Fonts

Sans-Serif: Helvetica Neue (Body Copy)
Sans-Serif-Condensed: Tablet Gothic Semi-Condensed
Slab Serif: Museo Slab
Serif: Garamond

Show SASS Variables

      
$sans-serif: "HelveticaNeue-Light", "Helvetica Neue Light","Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
$sans-serif-condensed: 'tablet-gothic-semi-condensed', 'Arial Narrow',sans-serif;
$slab-serif: "museo-slab", Rockwell, Courier, serif;
$serif: Garamond, Georgia, serif;

Helvetica Neue (Body Copy)

Font-Family	Font-Weight	Font-Style
"Helvetica Neue"	normal	normal
"Helvetica Neue"	normal	italic
"Helvetica Neue"	bold	bold

Garamond

Font-Family	Font-Weight	Font-Style
"garamond, "times new roman", "serif"	normal	normal
"garamond, "times new roman", "serif"	normal	italic
"garamond, "times new roman", "serif"	bold	bold

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.edu" servers and localhost for development.

Show JavaScript


  <script src="//use.typekit.net/hzv2aqa.js"></script>
  <script>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.

Helvetica Neue: Use Arial (most systems have Helvetica or Arial preinstalled)
Tablet Gothic Semi-Condensed: Use Open Sans Condensed
Museo Slab: Use Roboto Slab
Garamond: Use Pre-installed Garamond Font (available on many systems by default) or EB Garamond

Pagination

Sidebar Navigation

Link 1
- Sub Navigation
- Sub Navigation
Link 2
Link 3
Link 4

Primary Navigation

Navigation Bar

Mega Menu Promotional Areas

Kent State's new menu system allows the university to highlight interesting facts and accomplishments in a visual and interesting way. These drop-down menus are viewed by thousands of Kent State students, faculty, staff, alumni and visitors each day. Below are some guidelines for selecting content for the menus:

Suggested Dimensions: 118px by 150px

Highlights must be related to the general topic of the menu in which it resides. For example, Athletics menu might highlight a feature of the SRWC.
Highlights should be described in one or two sentences, in no more than 150 characters. The message must start with Kent State (or Kent State's) or the departmental name, such as Recreational Services (or Recreational Services').
While highlights may speak to multiple audiences, they should all appeal to students.
Highlights must include a small, vertical photo relating to the highlight.
Suggested photo dimensions are 118px by 150px.
Highlights must link to a Kent State web page for more information. The default link text is "Learn More". The character limit for custom link messages is 20.
Highlights should be changed seasonally or each semester.

Breadcrumbs

Action Links

Visit Campus Today

Horizontal Tabs

By default, section elements will be an accordion on mobile and tabs on desktops and tablets. Tabs are not currently a design pattern built in to Drupal.

Section 1

Section 2

Section 3

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. Accordions are not currenly a design pattern built into Drupal.

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

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. Vertical tabs are not currently a design pattern built into Drupal.

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>

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

The blockquote style should only be used for quotations and note as a standalone visual style.

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

In order to meet the legal standards for accessibility, all tables must include a header row (thead). Tables may only be used for tabular data and not for positioning elements into columns

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

List Item 1
List Item 2
List Item 3
List Item 1
List Item 2
List Item 3

Unordered (Bulleted) Lists

List Item 1

Sub List 1
Sub List 2

List Item 2
List Item 3

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. Modal windows are not currently a design pattern available for use in Drupal.

Click Me For A Modal
Show Markup

  			
<div id="myModal" class="reveal-modal">
  <h2>Kent State Is Ohio's Best University</h2>
  <p class="introduction">Modals can contain special formatting.</p>
  <p>You can dismiss the modal window by clicking the X.</p>
  <a class="close-reveal-modal">×</a>
</div>


<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

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 not currently available as a design pattern in Drupal

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

Large Feature Image

Large feature images are commonly used on Basic Pages and News Articles and expand the entire width of the page. You can add up to five images to the large option. They will automatically rotate.

Minimum size for large feature images is 1500px by 600px.
In Drupal, if the uploaded image is larger than the minimum size, Drupal will allow the user to crop the image to make it smaller.
Images must include alt text.
Large feature images commonly display a caption alongside the photo.
The Photoshop Web Cropping Grid (Interior Page Image Crop) should be used as a guide for what area of the image should be the focal point and what area will become semi-transparent once the image is placed on the page with the navigation.

Small Feature Image

Small feature images are commonly used on Basic Pages and placed above the local navigation to the left on the page.

Minimum size for small feature images is 640px by 680px
In Drupal, if the uploaded image is larger than the minimum size, Drupal will allow the user to crop the image to make it smaller.
Images must include alt text.

Profile Photos

Photos used in faculty/staff profiles should measure, at a minimum, 500px by 750px. Many official Kent State headshots can be found online.

Image Sliders

Image sliders are not currently available for use in Drupal outside of news articles. An image gallery option will be added in the near future.

This is the caption
This is the caption
This is the caption

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

Image galleries are not currently available for use in Drupal outside of news articles. An image gallery option will be added in the near future.

Show Markup

  				  			
<ul class="clearing-thumbs" data-clearing>
  <li><a href="img/golf.jpg"><img data-caption="This is the caption" src="img/golf-thumb.jpg" class="th"></a></li>
  <li><a href="img/ride.jpg"><img data-caption="This is the caption" src="img/ride-thumb.jpg" class="th"></a></li>
</ul>

Left Aligned Elements

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

This is the caption

Center Aligned Elements

This is the caption

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

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>

Information Graphics

Information Graphics are used throughout Kent State websites to call out points of pride and facts about the university or specific university programs. Graphics are hyperlinked to areas of the website with more information about that fact.

Specifications:

Information graphics are to be a single, approved color, although varying opacities may be used
Dimensions are 417px x 417px. Graphics are scaled to various sizes
Graphics should be iconic in nature and use flat design. Photos should never be used.
Graphics must be in .gif or .png format, with a transparent background
Graphic color must provide contrast with the background it's placed on.
View the Information Graphics Library to find approved information graphics, or to request a new graphic.

Kent State Is Ohio's Best University

Web Pattern Library

Tools for Third Parties and Developers

Templates for Prototyping

Prototype Page Samples

HTML Email Templates

Header/Footer

The Official Kent State Web Header

Header Guidelines

Global Header (Blue)

Blue Header Logo Files (White/Gold Logo)

Global Header (Blue) - With Utilities

Blue Header Logo Files (White/Gold Logo) and Give to Kent

Global Header (Neutral)

White Header Logo Files (Blue/Gold Logo)

Global Header (Neutral) - With Utilities

Blue Header Logo Files (Blue/Gold Logo) and Give to Kent

Global Footer

Colors

Primary Colors

Neutral Colors

Accent Colors

Color Palettes

Typography

Fonts

Helvetica Neue (Body Copy)

Garamond

Tablet Gothic Semi-Condensed

Museo Slab

Embedding Fonts

Alternate Fonts

Navigation

Pagination

Sidebar Navigation

Primary Navigation

Navigation Bar

Mega Menu Promotional Areas

Breadcrumbs

Action Links

Read More Link

Horizontal Tabs

Accordions

Vertical Tabs

Large Titles

This is the Home Page Headline Title

This is a Sub Header

Body Copy Headings

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

Paragraphs

Links

Quotes

Captions

Buttons

Standard Buttons and Calls to Action

Tables

Lists

Ordered List

Unordered (Bulleted) Lists

Alerts and Panels

Modal Windows

Panels

Tooltips

Icons

Frequently Used Icons

Images/Videos

Large Feature Image

Small Feature Image

Profile Photos

Image Sliders

Image Gallery With Lightbox

Left Aligned Elements

Right Aligned Elements

Center Aligned Elements

Inline Videos