General Guidance

• Use  a variety of components to keep people engaged as they scroll. Don’t use too many of one component type on a page and follow the guidance in this Style Guide in selecting the right component for your content.
• Experiment with component types. There’s probably a better component for that middle-of-the-page content than a WYSIWYG — try out a Carousel, Billboard, Two Column: Two Buttons, or Three Column.
• Use complex components sparingly. Reserve high impact components for high impact pages (like the Program Finder and Full-Width Video).
• Don’t get too crammed. Use spacers to add breathing room and negative space between components.
• Let photography do some of the work. Use vibrant and content-specific photography to enhance page visuals. The Full-Width Photo component is great for sprinkling big, bold photography into pages.

Color Guidance

Color Application in Headline Highlighting

Highlighting brings attention and visual flair to our H1 and H3 headline styles. All of the Butler colors aside from “Butler Blue” are optional color choices for these highlights. Some things to keep in mind when selecting a color:

1. Is this a primary piece of brand language? We use the Bright Blue and Yellow accent colors most on this site, followed by Pink, Orange, and Green. Headlines that are important to the Butler brand story or have to do with Butler Athletics should be highlighted in Bright Blue or Yellow.

2. Is this message really important? Since we use Pink, Orange, and Green less often than other colors in the Butler palette, things that are highlighted in these accent colors will really stand out. Consider saving these highlights for messages that you really want to catch viewers eyes.

3. Add lots of variety or keep things really consistent, but not somewhere in-between. On long pages, using different colored highlights throughout keeps things interested and viewers engaged. On shorter pages or pages with serious content, we can keep really consistent with color highlighting to not cause unintended busy-ness or distractions. Choose one of these approaches intentionally and try not to fall somewhere in between.

Color Application in Component Backgrounds

Like highlighting, different background colors brings attention and visual flair, but also serve to compartmentalize site content. All of the Butler colors aside from “Butler Blue” are optional color choices for these backgrounds. The guidance for selecting colors for backgrounds is similar to when we select a color for highlighting:

1. Does this house a primary piece of brand language? We use the Bright Blue and Yellow accent colors most on this site, followed by Pink, Orange, and Green. Components that house content important to the Butler brand story or have to do with Butler Athletics should be highlighted in Bright Blue or Yellow.

2. Is this message really important? Since we use Pink, Orange, and Green less often than other colors in the Butler palette, content housed in components with backgrounds set in these accent colors will really stand out. Consider saving these backgrounds for content that you really want to catch viewers eyes.

3. Add lots of variety, but in patterns. Using different colored backgrounds throughout pages keeps things interesting and viewers engaged, but it also serves to lead viewers through various content areas and separate different pieces of content from one another. Try to get a pattern going — if you have 5 components with backgrounds stacked on top of one another, it’s probably best to switch back and 
forth between a few colors than to use all 5 accent colors.

Type Styles

Below are the typographic styles available when working with text. Components have preset typographic styles that can serve as a good reference when setting headlines, subheadlines, body text, or captions in WYSIWYGs.

Hard Code Sketches

Colors options: blue-bright, blue-butler, yellow, pink, green, orange, white.

c

c-alt

u

u-alt

a

s

Hero: Default

This is the standard hero used for most instances on the sit. Headlines should not exceed two lines of text at Desktop breakpoints.

Options: 

• Subheadline with Optional Hard-Coded Sketches
• Description
• 1-2 Buttons
• Image
• Social Media Links
• Highlight Color: None, Yellow, Butler Blue, Bright Blue, Pink, Green, Orange

Hero: Alternate, Short

This Hero should be reserved for special instances such as college landing pages for its bold, impactful presence. Headlines should be very short.

Options: 

• Image or Video Background
• Social Media Links

Hero: Alternate, Tall

This Hero should be reserved for special instances such as college landing pages for its bold, impactful presence. Headlines should be very short.

Options: 

• Image or Video Background
• Social Media Links

Program Finder

The Program Finder is a large grid that can contain a number of engaging, motion-oriented visuals to draw attention to either a search field or dropdown.

Optional: 

• Search or Dropdown
• Accent Text
• Up to 2 Buttons
• Highlight Color: None, Yellow, Butler Blue, Bright Blue, Pink, Green, Orange

Quick Facts

This component allows us to display impressive and important statistics in a punchy way. This component can display up to 3 quick facts, but can be stacked with other Quick Fact components to display more. Each Quick Fact allows for you to select a specific sketch to add variety and impact — some of the sketches work better with shorter fact numerals and some work better with longer ones.

Options: 

• 1, 2, or 3 Quick Facts
• Sketches: Circle, Underline, Arrow, Star
• Sketch Color: Yellow, Butler Blue, Bright Blue, Pink, Green, Orange

One Column: Two Buttons

This component is meant to serve as a callout for important information and up to 2 CTAs. There is only one type style so this should either contain a long headline or a short piece of descriptive text. The duotone overlay is set automatically — this component can not display a full color image. Use a hard-coded sketch to emphasize 1 high impact words in your text.

Optional: 

• Hard Coded Sketch (Recommended Color: Yellow)
• 1 or 2 Buttons

Two Column: Billboard

This component can display a number of related card callouts that contain an image, headline, description, and button.

Optional: 

• Headline
• Highlight Color: None, Yellow, Butler Blue, Bright Blue, Pink, Green, Orange
• Description Text
• Up to 10 cards
• Blue Sketch Arrows

Two Column: Two Buttons

This component allows you to break up a page with a full-width color background, a limited-use headline style, and text buttons. This component should  not stack with other Two Column: Two Buttons in succession. There are other engaging ways to display similar sorts of content that should be considered first (Carousel, Billboard).

Options: 

• Background Color: None, Yellow, Bright Blue, Pink, Green, Orange
• 0, 1 or 2 Text Buttons
• Blue Sketch Arrows

Two Column: Quote

These Two Column callouts are great for featuring Butler individuals with room for a medium length quoted headline and a portrait. These components stagger left and right when stacked on top of one another and always have a background. On hover, a spinning piece of text appears around the cursor using the same text as the CTA Text Button. The Kicker Text color informs the color of the headline and text button on hover.

Options: 

• Kicker Text Color: Yellow, Butler Blue, Bright Blue, Pink, Green, Orange
• Alternate Cursor Text

Two Column: Text/Buttons/Image

Similarly to the One Column: Two Buttons component, this component is meant to serve as a callout for important information and up to 2 CTAs, where the first CTA is solid and primary and the second is ghosted. Use a hard-coded sketch to emphasize 1 or 2 high impact words in your text.

Optional: 

• Hard-Coded Sketches
• Up to 2 buttons

Two Column: Full-Width Image or Video

This component is made up of a background and white card that can be used to feature a headline, description and up to 4 CTA text buttons.  Do not stack on top of another Two Column: Full-width image or video component or a Gallery: Carousel.

Options: 

• Image or video background
• Highlight Color: Yellow, Butler Blue, Bright Blue, Pink, Green, Orange (this will inform the color of the bar above the card)

Three Column: Text and Action Links Right

Similarly to the WYSIWYG, this component is great for displaying content in a simple, legible way with up to 3 buttons. It pairs great with a Full-Width Image component directly below.

Optional: 

• Hard Coded Sketches
• 1, 2, or 3 Buttons

Accordion

Accordions allow us to display a large amount of information while keeping the scroll length of pages short and allowing uses to choose which information is important to them. If there are only 2 accordions the highlight color will display automatically. If there are 3 or more accordions the highlight color will only display on hover or when open. If used under a WYSIWYG with a sidebar menu there is an option for the accordions to nest to that smaller width of the WYSIWYG text. Each accordion supports an entire WYSIWYG and the flexible styling that that affords.

Options: 

• Kicker Text for Accordion Grouping
• Highlight Color: None, Yellow, Butler Blue, Bright Blue, Pink, Green, Orange

Full Width Video/Image

Full Width Image:

• Confined to the margins of the site
• Optional: Highlighted headline for the video
• Optional: Butler Flag Sketch decoration

Full Width Video:

• This version of the component should be reserved for special circumstances where we want to display something big, impactful, and eye-catching
• Two lines of impactful text that will slide across the screen on scroll
• Optional: Highlighted headline for the video
• Optional: Butler Flag Sketch decoration

Gallery: Carousel

The carousel allows for up to 4 slides of content. Each slide contains a background image, an optional cutout image, and a card with kicker text, a headline, body copy and up to one text button. Each slide can have a title that will appear in the autoscroll navigation on the bottom — we recommend using the kicker text here. Do not stack on top of another Two Column: Full-width image or video component or a Gallery: Carousel.

Imagery:

• Cutouts work best with the duotone switched on for the background so the cutout stands out
• If you turn on the overlay for one slide, it will be turned on for all slides

Options:

• Highlight Color: Yellow, Butler Blue, Bright Blue, Pink, Green, Orange (this will inform the color of the bar above the card)

Gallery: Modal

The Gallery: Modal is an eye-catching and large-scale way to show off a number of Butler photos. It has a looping piece of brand copy, space for a medium length headline, and a CTA to draw users to open up the modal window to view photos and their captions.

Notes: 

• The looping text should be 4 words or less to ensure it repeats twice in most browser sizes.
• Photos in the preview version of the component are automatically set.
• This component works best towards the bottom of a page above the footer, but is not required to be there.

News

The News component features a headline and the 3 most recent articles from a selected category.

Categories: 

• All Categories
• Admission
• Alumni Success
• Archive
• Butler Beyond
• Butler Experts
• Campus
• Experiential Learning
• Innovation
• Magazine
• Student-Centered

Events

The Events component features a headline and the 4 most upcoming events from a selected category.

Categories: 

• All Categories
• Alumni
• Arts & Culture
• Athletics
• Campus Life
• Talks & Lectures
• Wellness

Contact Footer

The Contact Footer can appear at any point in a page but is recommended for use above the footer, so it easily findable by users. This component contains a headline and up to 4 columns of content. The first three columns can have a header and necessary contact info. The fourth column has the option to add social media links.

Optional: 

• Butler Flag Sketch