Welcome to the InterVarsity Style Guide!

The InterVarsity Style Guide exists to help us make professional looking websites. We've all run into sites that are inconsistent, have different colors all over the place, a huge range of font sizes, etc. The Style Guide is our place of truth.

For quick access, we've listed below some of the common pieces of style that you might be interested in. Also check out the menu up top for other resources related to how to style InterVarsity websites.

NOTE

The style guide assumes a general knowledge of HTML and CSS, including basic tags, classes, and ids. If those words aren't familiar, check out the HTML Tutorial and the CSS Tutorial on W3Schools. Your friendly developers are also able to help.

If you don't find something you're looking for here, or have any questions about if you're styling something right, be sure to contact us.

QUICK LINKS

Text

How do I make my text look right? Check out the Typography page to learn more.

Typography

Buttons

How do I make buttons and use them well? We have a page all about buttons!

Buttons

Helpful Classes

There are some helpful classes for building layouts, like spacing, centering things, etc.

Helpful Classes

Imagery

Images are powerful. Check out the Site Building Resources to find imagery.

Resources

Icons

Did you know we have access to over 600+ icons through Font Awesome? Learn how to use the icons provided.

Icons

Block Styles

Each one of these is a block - learn how to style them in different ways on the Block Styles page.

Check it Out

Page Examples

There are several different page styles available, including 2 different homepages. Take a look!

Page Examples