Close

Heading + CTA Buttons with 18 different brand colors

Button Number 1Button 2

Sample Headline

Sample ButtonSample Button

Sample Headline

Sample ButtonSample Button

1500x930
1/2

Images and content can be added

Buttons go here
3
2/2

Each image can have supporting copy

Sample Buttons

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
03
Jan

7:14 pm - 7:14 pm
More Info Tickets
30
Jan

Gabrielle Civil in Conversation: A Black Feminist Celebration

6:00 pm - 7:00 pm
06
Feb

Erin Reddick in Conversation

7:00 pm - 8:00 pm
16
Feb

Live Performances: Bohemian Rhapsody

3:00 pm - 4:00 pm

News & Events Grid

Sample Headline
10 May
Live Performances: Bridgman/Packer

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

04 May
The Claremont Concert Orchestra

2:00 pm - 3:30 pm | Garrison Theater, Scripps College Performing Arts Center

Sample Headline

Dec. 20, 2024

Scripps Debuts Inaugural Digital Annual Report for 2023–24
Read More

Nia Carroll ’26 Curates First Art Show at Mt. San Antonio Gardens
Read More

“Change Takes Time”: Rep. Emily Alvarado ’03 Champions Progress in Washington
Read More

News Display

Sample Headline

December 20, 2024

Scripps Debuts Inaugural Digital Annual Report for 2023–24

Read More

December 20, 2024

Nia Carroll ’26 Curates First Art Show at Mt. San Antonio Gardens

Read More

December 20, 2024

“Change Takes Time”: Rep. Emily Alvarado ’03 Champions Progress in Washington

Read More

Events Slider Hero

Events/News Menu & News Slider

Hao Huang’s Gold Mountain Podcast Launches New Season
Read More
EVENTS LINK
NEWS LINK

Page Menu & Sliders

Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

LINK TEXT
LINK TEXT

Upcoming/Related Events Carousel

All Events
Sample Button
30
Jan

Gabrielle Civil in Conversation: A Black Feminist Celebration
06
Feb

Erin Reddick in Conversation
16
Feb

Live Performances: Bohemian Rhapsody
17
Feb

@Noon with Nora Dahlia Zelevansky ’99
18
Feb

Marion Jane Girard Memorial Lecture with Su Yeong Kim
20
Feb

An Evening with Sophie Grégoire Trudeau

Scripps Series

Sample Headline

In the Media: Amy Andrews ’09’s Music to Be Featured in Concert Series, Broadway World Reports

The concert will take place on July 29 at 9:30 p.m. In the Media: Amy Andrews ’09’s Music to Be Featured in Concert Series, Broadway World Reports

Read More
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

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

Section Title

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