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.


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

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


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

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 (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 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 E. Summit St., Kent, OH 44240 (Physical Address)
P.O. Box 5190, Kent, OH 44242-0001 (Mailing Address)

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

Typography

Fonts

Show SASS Variables
      
$serif: Garamond, "Times New Roman", serif; $sans-serif: 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
Helvetica normal normal
Helvetica normal italic
Helvetica 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.


Pagination


Sidebar Navigation


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:

Mega Menu Image Example

Suggested Dimensions: 118px by 150px

Example of Mega Menu Promotional Area

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

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

  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. Modal windows are not currently a design pattern available for use in Drupal.
Click Me For A Modal
Show Markup

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.

Kent State Waterfall at Risman Plaza


Small Feature Image

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

Kent State Waterfall at Risman Plaza


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.

Evan Bailey


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.

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

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>

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.