
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)
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.
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.
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.

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
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 Vice President for Enrollment

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

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.

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.
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.
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.
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.
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 |
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.
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.
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.
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.
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.
Ripon Parents Network Spring 2025 Meeting
Annual spring meeting of the Ripon Parents Network. The meeting will take place in person with a Zoom option for those who cannot attend. Coffee, water, snacks and lunch will be provided. Let us know you’re coming, please RSVP using this Form

Time Line Component