Style Guide

LayoutColorsTypograph
FormsComponents

Heading + CTA Buttons with 18 different brand colors

Button Number 1Button 2

Sample Headline

Sample ButtonSample Button

Sample Headline

Sample ButtonSample Button

3
2/2

Each image can have supporting copy

Sample Buttons
1500x930
1/2

Images and content can be added

Buttons go here
3
2/2

Each image can have supporting copy

Sample Buttons
1500x930
1/2

Images and content can be added

Buttons go here

Hero Background Slider

Sample content goes here. Maybe multiple lines.

Sample Button

Hero Image

JPG (3)

Interior Page Hero Image

1500x930

Breadcrumb

Scripps College > Component Library

Page Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada. Aliquam facilisis diam porttitor, scelerisque lacus feugiat, interdum libero. Sed eget porttitor odio, a fringilla sapien. Nulla vel lacus suscipit, molestie tortor a, accumsan ipsum.

Three Column Content: Can use all brand colors

Sample Column One Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Sample Column One Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Sample Column One Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Sample Column One Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Sidebar + Content: Used for menus/page overview

Sidebar + Content White

1000x667

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Sidebar + Content Teal

Welcome to Scripps College

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Content + Image or Video: this component functions more like the Two Column Callouts we typically design. With Optional Color backgrounds and Text color

Sample Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Sample Button Sample Button
1000x667
Sample Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Sample Button Sample Button
Isabela Harmon '22 and Jess Maurice '22 hold up vials of specimens they collected during their research at the W.M. Keck Science Department at Scripps College

Quote + Image

1000x667

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Quote Attribution
Supporting Text
1000x667

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem urna, feugiat vel tempor a, maximus et neque. Duis maximus felis vel interdum malesuada.

Quote Attribution
Supporting Text

Call-Out GridThe title can have a select color and selected color underline. The component itself can also have a background color

Sample Headline

800x800

Sample Button
Folded currency forms the shape of lightning bolts

Sample Button
Anna Bagley ’22, a student at Scripps College in Southern California, using microbiology to address one of the major environmental concerns facing our planet: water pollution.

Sample Button
An audience views the LA Edge exhibition at Scripps College's Ruth Chandler Williamson Gallery

Sample Button
A photograph of a bust of Standing Cloud, taken by Ken Gonzales-Day

Sample Button
A green wooden door leads to a courtyard on the Scripps College campus in Southern California

Sample Button

Sample Headline

800x800

Sample Button
Folded currency forms the shape of lightning bolts

Sample Button
Anna Bagley ’22, a student at Scripps College in Southern California, using microbiology to address one of the major environmental concerns facing our planet: water pollution.

Sample Button
An audience views the LA Edge exhibition at Scripps College's Ruth Chandler Williamson Gallery

Sample Button

Call-Out Cards

Sample Title

800x800
Sample Headline
Scenic photo of Scripps Campus with the San Gabriel Mountains in the background
Sample Headline
Anna Bagley ’22, a student at Scripps College in Southern California, using microbiology to address one of the major environmental concerns facing our planet: water pollution.
Sample Title

Headline for Normal Layout

Optional Button Optional Button
800x800
Sample Headline
Scenic photo of Scripps Campus with the San Gabriel Mountains in the background
Sample Headline
Anna Bagley ’22, a student at Scripps College in Southern California, using microbiology to address one of the major environmental concerns facing our planet: water pollution.
Sample Title

Headline for Detailed Layout

Optional Button Optional Button
Lorem ipsum dolor
800x800
Sample Headline
Lorem ipsum dolor
Scenic photo of Scripps Campus with the San Gabriel Mountains in the background
Sample Headline
Lorem ipsum dolor
Anna Bagley ’22, a student at Scripps College in Southern California, using microbiology to address one of the major environmental concerns facing our planet: water pollution.
Sample Title

Events ShowcaseThis component uses a dynamic fill to select from events

Sample Headline

See All Events
10
May

Winter Concert

Get Ticket

Live Performances: Bridgman|Packer

7:00 pm - 9:00 pm | Garrison Theater
GET TICKETS!! Celebrate Scripps’ Class of 2025 with Ghost Factory, a magical, exhilarating production by visionary duo Art Bridgman and Myrna Packer. As co-directors of Bridgman|Packer Dance, Bridgman and Packer have been redefining dance… Live Performances: Bridgman|Packer
More Info Tickets
02
Apr

@Noon Mary Routt Chair Éireann Lorsung

12:00 pm - 1:00 pm
04
Apr

“Deference” WORKSHOP

9:00 am - 6:00 pm
04
Apr

Friday Noon Concert Series

12:15 pm - 1:00 pm

News & Events Grid

Sample Headline
10 May
Live Performances: Bridgman|Packer

7:00 pm - 9:00 pm | Garrison Theater

08 May
Scripps Student Recital at Harvey Mudd

7:00 pm - 8:30 pm | Drinkward Recital Hall

Sample Headline

Mar. 26, 2025

Inside the Classroom: Making Computer Science
Read More

Mar. 14, 2025

Jon’Nae Sylvester ’24 Joins Youth250 Bureau as a Voice for Gen Z
Read More

Mar. 12, 2025

Professor Ken Gonzales-Day’s Art Ranked Among the 100 Best of the 21st Century
Read More

News Display

Sample Headline

March 26, 2025

Inside the Classroom: Making Computer Science

Read More

March 14, 2025

Jon’Nae Sylvester ’24 Joins Youth250 Bureau as a Voice for Gen Z

Read More

March 12, 2025

Professor Ken Gonzales-Day’s Art Ranked Among the 100 Best of the 21st Century

Read More

Events Slider Hero

Events/News Menu & News Slider

EVENTS LINK
NEWS LINK

Page Menu & Sliders

Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1/3
LINK TEXT
LINK TEXT

Upcoming/Related Events Carousel

All Events
Sample Button
02
Apr

@Noon Mary Routt Chair Éireann Lorsung
04
Apr

“Deference” WORKSHOP
04
Apr

Friday Noon Concert Series
09
Apr

To Advance the Race: Black Women’s Higher Education from the Antebellum Era to the 1960s
09
Apr

Elizabeth Turk ’83 and John Ochsendorf in Conversation: Suspended Meditation
10
Apr

Live Performances with Soundwaves

Scripps Series

Sample Headline

Button Text

Small Logos Grid

Stats

The Scripps Advantage

With a headline

Sample Text
100 %
Lorem Ipsum Dolar
50
Lorem Ipsum Dolar
10 %
Lorem Ipsum Dolar

Accordion Section

Sample Headline

Section Title
Section Title