Web Style Guide | Ripon College

This is the new emergency bar. Use it to help out with stuff.

The Supertitle

Two-Column Content Looks Great

The section title uses an H2 to display a title that looks closer to an H1 in size and style. – it’s generally used to denote main sections of pages. This component can be used to display atop many of the different components on the site, or on its own. We have multiple padding options to give extra padding above and below for when displaying on its own (before a quick links section or hero image, for example), or you can choose ‘no bottom padding’ when it’s displayed above a different type of content (quotes, content sections – 1, 2 or 3 column, stats, etc). This particular section title uses the ‘no bottom padding’ option to slightly narrow the amount of space before the next content area.

Above is a photo component. Images in this section will be allowed to span the full width of the column, and will get a slight rounding to the corners. For photo components, make sure you upload the image in the aspect ratio you’d like it to display, because unlike when we’re using images in normal WordPress editors, the images aren’t automatically cropped, they just scale to all screen resolutions to fill the area they’re given (where possible). Make sure the image you’re adding is wide enough to fill the space for best results (if equal width columns, try to include an image that’s at least 1000px wide – so if the aspect ration is 5:2, you’d upload 1000px x 200px).

This is a basic two-column content area, that we can choose how wide columns should be (wider left or right, or equal). Below you’ll see how a nav menu component displays in all content-type components.

Let’s go over some title sizes! H1s should never be used inside the content areas of pages, because the main title on the top of pages uses an H1, and each page should only have one H1 (per web standards, and SEO concerns). As such, we’re not including a style for H1s in the web style guide.

Heading Two (H2)

H2s are likely also going to be rarer in content areas, because we use H2s on the top of some components by default, and the Section Title component uses an H2. Most content areas will be started by H3s.

Basic unordered list styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum.
Another Item
In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

Heading Three (H3)

Basic ordered list styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum.
Another Item
In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

Heading Four (H4)

Fun fact: Horizontal Rules (hr) are designed in this theme to provide some whitespace and separate sections of content and make things easier to read. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum. In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

Heading Five (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum. In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

Heading Six (H6)

Test Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper, mauris sit amet aliquam ullamcorper, nunc augue sagittis metus, ut elementum tellus tortor at massa. Nam condimentum semper metus in sollicitudin. Vivamus molestie mi sed bibendum lobortis. Cras faucibus eros in nibh venenatis auctor. Sed ornare viverra erat a molestie.

Fusce suscipit lobortis justo. Phasellus dignissim sem eget feugiat molestie. Sed molestie mauris in tristique venenatis. Morbi molestie, urna et tempor dapibus, dolor lorem gravida nunc, rutrum semper dolor tortor et turpis. Vivamus varius tellus in lectus convallis, commodo gravida nibh efficitur. Quisque gravida mi vitae magna efficitur, in interdum justo tempor.

Test Accordion Two

Standalone Content Feature

This is another way to display a two-column content area. It’s still using the equal column widths, but this one uses row-reversal to display the image on the top on mobile, but on the right on larger screens. It’s also vertically aligning the content of both columns, and we’ve set a Tan background color for it to separate it from the previous section without it needing to have its own title.

Data is Awesome

Let's Show Some Statistics

The component below displays various statistics and is useful for discussing datapoints in a visually pleasing way. We set an icon for each statistic, specify a number, and a subtitle for each stat.

This section title uses ‘no bottom padding’ but bring it closer to the stats below it, and we set a background of white to create separation from the previous section.

95%

of this statistic is made up.

87%

of this one too.

125

national awards received.

25

local restaurants.

This quote section displays with or without the quote marks above this section, and can be displayed on a tan or white background (whichever separates it best from the components above and below it). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet neque vel urna maximus ultricies.

Jane Smith

Totally Not a Real Person

Well, I'll Be!

It's Multiple Quotes in One Section!

We also have a ‘Quotes (Multiple)’ component that can be used to display multiple quotes from different people. It’s useful for displaying alumni testimonials on areas of study pages, etc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

Jane Doe

Bachelors: Early Education

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

John Smith

Somehow Also Early Ed. Bachelors

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

Steve Johnson

Has a Job, For Sure.

We Want to Do Stuff!

Goals Component

The ‘Goals’ component can be used to set goals for projects, remodeling, endowment spending, fundraising, etc. It provides a way to display a larger goal, and then a lot of smaller sub-goals.

91%

$27.5 of $30 million

A Smaller Goal | $12 million

83%

Things We've Built | 10 buildings

80%

Monetary Goals For the Win! | $1.5 million

80%

Staff & Faculty Listings

People Component

The ‘People’ component can be used to display a list of people from a particular group in the backend of WordPress. We can add any kind of people to groups and display them anywhere, with or without a search bar on top, and on either a white or tan background.

Folse, Victoria N.

President and Professor of Psychology

Hoffmann, Audra

Vice President for Finance

King, Greg

Interim Associate Vice President for Recruitment Strategy

Ogle, Chris

Vice President and Dean of Students

Schumacher, Chris

Vice President and Director of Athletics

Sisko, John

Vice President and Dean of Faculty, Professor of Philosophy

Zimmerman, Kimberly

Vice President for Enrollment

Academics

Areas Of Study

Test again

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare, sem a blandit interdum, mi nisi feugiat ex, ac eleifend justo velit fermentum ex. Nulla eros purus, scelerisque et faucibus ut, pulvinar a tortor. Nullam vestibulum dui metus. Nulla facilisi. Nullam ultrices hendrerit arcu non efficitur. Curabitur vehicula pharetra orci in placerat. Nulla finibus blandit venenatis. Nulla sit amet leo a magna hendrerit malesuada. Etiam eget ligula vitae turpis vulputate tincidunt.

Adapted Physical Education

American Studies

Ancient, Renaissance and Medieval Studies

Computer Science – Chemistry

Computer Science – Interdisciplinary

Computer Science – Mathematics

Computer Science – Physics

Environmental Biology

Environmental Studies

Exercise Science – Athletic Training

Exercise Science – Human Performance

Exercise Science – Physical Education & Health

Exercise Science – Sports Management

Latin American and Caribbean Studies

Pre-Law Scholars Program

Pre-Medicine and Health Sciences

Pre-Nursing

Pre-Physical Therapy

Pre-Veterinary Medicine

Strength and Conditioning

Theatre

Women’s, Gender, and Sexuality Studies

Pretty Pictures

Quick Links Component

The ‘Quick Links’ component provides a pretty way to display some link options for a higher-level page to link to the main sections of that part of the site. The images in these quick link bars usually work best if they are about 5:2 aspect ratio – the display size varies because they’re set as a background image and will just fill the space, but as a general rule, use landscape oriented photos with the subject of the photo in the center of the image, so that it will display well at all resolutions.

Quick Link Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

Learn more ⟶

Another Great Quick Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at maximus metus. In faucibus non nisi at interdum. Nullam pulvinar nulla tincidunt, feugiat arcu vel, facilisis urna.

Learn more ⟶

Two Components for One

Single Column Component

The ‘Content (1-column) component has three different style settings: ‘style’ which dictates the width (narrow or full), the color (which can be white or tan), and the padding (which can be normal, tall, or no-bottom). No bottom padding will result in this section butting up against the next one, and just using that components padding to space its content away from the next component.

After that, we’ve got a basic hero image.

A Title for this Video

Call to Action

Two Columns

Multiple Columns with Boxes!

This can display on either white or tan backgrounds, and just has borders around the columns.

Scholarships

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum, sapien in volutpat convallis, magna nibh facilisis lectus, eu laoreet sapien neque ut nisi. Quisque sagittis dui sagittis vehicula congue. Quisque a dui ligula. Phasellus ac velit vitae dui aliquet luctus sed id lectus. Integer vel lacinia leo, vitae facilisis tortor. Pellentesque sit amet libero eu erat lacinia venenatis. Nunc ut diam tortor.

A Button

Scholarships

Another Button

Scholarships

Tab One

Tab Two

Tab Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in accumsan mi. Fusce a mattis velit, sed malesuada nisi. Cras augue erat, euismod et leo semper, porttitor accumsan purus. Vivamus nulla odio, pharetra non dolor a, laoreet venenatis tortor. Vestibulum quis efficitur magna. Nulla nec egestas magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc volutpat malesuada diam. Integer hendrerit magna in sem efficitur, eget interdum odio placerat. Nullam rhoncus nisl at ipsum dapibus, fermentum placerat justo sollicitudin. Cras velit tellus, condimentum sed facilisis eget, interdum non tortor. Pellentesque sed pulvinar lorem, vitae hendrerit massa. Fusce ac pretium enim.

Donec augue sapien, aliquam id tortor nec, vulputate sollicitudin justo. Phasellus sed maximus felis, a ultrices eros. Nam scelerisque metus ligula, a dignissim justo accumsan vitae. Aliquam mauris libero, molestie vitae placerat ac, varius et purus. Donec suscipit leo augue, in semper metus posuere ut. Nunc accumsan euismod arcu id dignissim. Nullam dui diam, eleifend vel ex ut, porttitor pharetra elit. Donec faucibus a ligula vitae malesuada. Sed et lacinia eros, quis iaculis neque. Pellentesque placerat, leo id porttitor efficitur, magna metus egestas quam, quis ultricies purus quam vel sem. Aliquam sit amet nisi at lectus ultrices malesuada at semper turpis. Suspendisse aliquet volutpat justo, nec euismod ex ultrices in. Cras accumsan velit et tellus sollicitudin tempor.

My Table Title
Row One	$1234	$1234
Row Two	$1234	$1234
Row Three	$1234	$1234
Row Four	$1234	$1234

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc volutpat malesuada diam. Integer hendrerit magna in sem efficitur, eget interdum odio placerat. Nullam rhoncus nisl at ipsum dapibus, fermentum placerat justo sollicitudin. Cras velit tellus, condimentum sed facilisis eget, interdum non tortor. Pellentesque sed pulvinar lorem, vitae hendrerit massa. Fusce ac pretium enim.

Nulla nec egestas magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc volutpat malesuada diam. Integer hendrerit magna in sem efficitur, eget interdum odio placerat. Nullam rhoncus nisl at ipsum dapibus, fermentum placerat justo sollicitudin. Cras velit tellus, condimentum sed facilisis eget, interdum non tortor. Pellentesque sed pulvinar lorem, vitae hendrerit massa. Fusce ac pretium enim.

Pellentesque placerat, leo id porttitor efficitur, magna metus egestas quam, quis ultricies purus quam vel sem. Aliquam sit amet nisi at lectus ultrices malesuada at semper turpis. Suspendisse aliquet volutpat justo, nec euismod ex ultrices in. Cras accumsan velit et tellus sollicitudin tempor.

Photo One

Photo Two

Photo Three

Calls to Action with Photo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem mi, hendrerit vitae mattis eget, bibendum nec elit. In interdum maximus massa nec tincidunt. In tincidunt tortor sed lacus euismod rhoncus sed at turpis. Phasellus placerat nibh a erat porttitor, id bibendum ex aliquam. Aenean magna massa, placerat in dapibus id, vestibulum vehicula est. Donec tempor tortor sit amet malesuada ullamcorper. Vestibulum varius nec magna in efficitur.

Test Button Two Test Button

Data Points

Facts

100% Satisfaction

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

$46,777 Raised

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

85% Employment

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Data Points

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

More Data Points

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Even More?!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Yes, Even More.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Time Line Component

Oct. 10-13	Time	What/Where? *Student Only Functions	Description
Friday Registration Saturday Registration	12-6 p.m. 8 a.m.-12 p.m.	Registration and Check In - Lower Level, Pickard Commons	Stop in, register, and pick up a Ripon College swag bag, plus an official name tag and wristband for event entry and complimentary Red Hawks Tailgate drink ticket.
THURSDAY	OCT. 10
	2-4 p.m.	*Ask Me Anything Career Services - Lower Level Pickard Commons	Hosted by the Center for Career and Professional Development, the Alumni Board of Directors and Board of Trustees, students have the opportunity to connect with alumni and ask questions about life after Ripon.
	9-11 p.m.	*Late Night Breakfast - Main Dining Room, Pickard Commons	Students will be served by Faculty, Staff and members of the Board of Trustees and Alumni Board. Hosted by SAGE Dining Services.
FRIDAY	OCT. 11		Show your Ripon pride by wearing your Red Hawks gear today!
	7 a.m.-4 p.m.	Common Grounds - Lower Level, Pickard Commons	Serving made to order Starbucks beverages and bakery items.
	9:30-10:30 a.m.	Cookie Giveaway - Upper Campus Locations	Students, Faculty and Staff can enjoy cookies between classes.
	11:15 a.m.-12:15 p.m.	Catalyst 120: The Science of Coffee - Location TBD	Join this Catalyst course focused on quantitative reasoning taught by Assistant Professor of Chemistry Bryan Nell '09.
	11 a.m.-10 p.m.	The Spot - Harwood Memorial Union	Food and beverages available for purchase. Students can use points.
	11:30 a.m.-1 p.m.	SOAR Poster Session - Location TBD	Participating students in the 2024 Summer Opportunities for Advanced Research (SOAR) program will share poster presentaitions highlighting hands-on research completed over the summer with a faculty mentor.
	11:35 a.m.-12:35 p.m.	Catalyst 220: REVOLT! RESIST! REFORM! Theatre for Social Change - Location Rodman, B21 (basement level)	Taught by Assistant Professor of Theatre Lillian Brown, this course elevates students into thinking critically about the human condition working in small groups to create short performance studies inspired by relevant socio-political issues.
	2:30-3:30 p.m.	Health Professions Alumni Panel - Location TBD	Students, families and alumni are invited to learn more about the role of the liberal arts in a variety of healthcare fields from Ripon College alumni: Greg Furdek '04 DDS, Weston Radford '07 MD, Emma McDonald, '18 DPT, Lauren Marshall Squire '04 PA, Stephanie Jenisch Rheingruber '12 MOT, OTR/L and Naomi Jiter '19 MPH. Hosted by the Chemistry and Biology Departments, and the Office of Annual Giving and Engagement.
	11:45 a.m.-1:15 p.m.	Multicultural Alumni Network Luncheon - Great Hall, Harwood Memorial Union	The inaugural gathering of the Multicultural Alumni Network (MCAN) will feature a time for alumni and students to connect with MCAN leadership and share insights for group development and priorities.
	5-6:30 p.m.	R Connections Cocktail Hour - 2nd Floor, Knuth Brewing Company, Downtown Ripon	All alumni, families, faculty and staff are invited to a special reception honoring those donors and volunteers who provide the Ripon experience to current and future students. Special guests include President Folse and members of the Board of Trustees, Alumni Board of Directors, and Ripon Parent Network.
	5:30-8:30 p.m.	Ripon Rhythm and Brews Craft Beer Celebration - Downtown Ripon	Hosted by Ripon Main Street, this craft beer walk in Downtown Ripon is open to the public, but Ripon families and alumni who register for Family Weekend and Homecoming can purchase discounted tickets courtesy of the Office of Advancement for $20 per person. for more details about this event, click here.
	7 p.m.	Chamber Music and Jazz at Ripon Series: Christopher Avilez, guitar - Demmer Recital Hall, Rodman Center for the Arts	Internationally acclaimed guitarist Christopher Avilez is one of the teaching faculty with whom Ripon College students have studied through the college’s study abroad program in Barcelona. Avilez enjoys engagements in both recital and concerto settings, playing most recently in Austria, Bolivia, Colombia, and Mexico. He has recorded five albums to date, with each one highlighting a passion for music of Latin American composers. All events in the Chamber Music & Jazz at Ripon Series are free and open to the public thanks to generous support from Ripon College’s Friends of the Arts.
	8-9:00 p.m.	*Student Pep Rally - Weiske Gym, Willmore Center	Featuring a performance by the Rally Band, Lip Sync contest and minute to win it games. The first 100 student attendees get a free Homecoming t-shirt.
SATURDAY	OCT. 12		Wear RED to show your support of Red Hawks Athletics!
	7 a.m.-4 p.m.	Common Grounds - Lower Level, Pickard Commons	Serving made to order Starbucks beverages and bakery items.
	9-10:30 a.m.	Continental Breakfast & Campus Resource Fair - Great Hall, Harwood Memorial Union	The Ripon Parent Network will host a complimentary continental breakfast for families to enjoy while learning about key campus resources from faculty and staff.
	10-11 a.m.	Walk on the Prairie - Meet at the Ceresco Prairie Conservancy trailhead west of the Willmore Center	Enjoy a Ripon tradition, by joining Associate Professor of Biology Ben Grady, and Professor of Biology Memuna Khan for a guided trail walk through the College’s 130-acre conservancy that features native prairie, oak savannah, and wetlands habitat.
	10-11:30 a.m.	Alumnae Softball Game - Tracy Field	All program alumnae and current players and their families are invited to the annual Alumnae Softball Game.
	12-7 p.m.	Pop-Up Apparel Store - Hopp Stadium	Special hours for alumni and families to purchase Ripon College apparel.
	3:30-5:30 p.m.	Red Hawks Tailgate - Hopp Stadium	Featuring food and beverages available for purchase, music, cornhole tournament, plus designated tailgate zones for Men's and Women's Basketball alumni and Track & Field, Cross Country alumni. Plus, registered guests receive one drink ticket.
	Red Hawks	Athletics	Featuring performances by the Rally Band and Rally Band Alumni, contest entry and Red Hawks Rally towels are included with Family Weekend & Homecoming registration.
	11 a.m.	Men’s Soccer v. Beloit College - Hopp Stadium
	1 p.m.	Volleyball v. Cornell College - Weiske Gymnasium, Willmore Center
	1:30 p.m.	Women’s Soccer vs. Beloit College - Hopp Stadium
	6 p.m.	Football vs. Knox College - Hopp Stadium
SUNDAY	OCT. 13
	10 a.m.-1 p.m.	Brunch - Main Dining Room, Pickard Commons	Enjoy a delicious brunch provided by SAGE Dining Services. Students will swipe, and guests are just $9.50 at the door.