Switch color palette

Click on your color palette below to match this page's appearance to your site

Canyon color palette: various shades of turquoise, gray, and red

 

 

 

 

Canyon

 

Cardinal colors

 

 

 

 

Cardinal

 

Cliff color palette colors: various shades of red and gray with a splash of turquoise

 

 

 

 

Cliff

 

Lake color palette on colorful theme

 

 

 

 

Lake

 

Mountain color palette on colorful theme

 

 

 

 

Mountain

 

Ocean color palette on colorful theme

 

 

 

 

Ocean

 


Confused?

If things look different on your site, you must be on the Traditional theme. Visit the Traditional reference site.

Main content start

Components to Highlight Information

Choose the color palette in the left column that matches the one used on your site to see how these Components will look when you incorporate them into your pages. 

Jump to: 

Resources

Color Bands

Cardinal

Gray

Light

The four bars above are examples of Color Bands. They can be used to break up long sections of text or group sections of information together. Color Bands generally include text, but can also be used without. The first example that reads "Color Bands" displays a full-width Color Band in the default color. "Default" in this case refers to the color that will be automatically selected based on your site's theme and color palette. The second example is cardinal, and the third is gray. A final example that contains no text is shown in the light color option. 

Callout Boxes

This is a callout box. It floats to the left or right and MUST be placed above a Text Area component.

Callout Boxes can have several formats. The box to the left is the most basic way a Callout Box can be formatted. This example is text-only, with no special typography styling. It is left-aligned and in the default callout style.

As you can see, when no special formatting is used and the default callout style is selected, the text blends in with the rest of the page. The information included isn't highlighted in a way that pops out to your readers. However, the text in the Text Box that follows will wrap around the Callout Box as demonstrated here. 

This is a callout box. It floats to the left or right and MUST be placed above a Text Area component.

The example to the left is exactly the same as the one above, except that the callout style is set to "well."

As you can see, adding in a background allows your content to pop out at your readers. This is a great way to highlight a bit of important information or just to break up a long area of text. As in the prior example, the text in the Text Box that follows will wrap around the Callout Box as demonstrated here. 

glasses on book

A callout box can also have images.

This next example of a Callout Box is left aligned with "well" callout style. It uses an image and lead text typography styling.

Play around with Callout Boxes! They can be formatted in a variety of ways to highlight information in creative, eye catching ways.

This is another callout box.

In this final example, the box is right-aligned and uses a block quote text styling. This example uses the default callout style, which means there is no shadow or box around the callout section, but the use of special typography allows the content to pop out at the reader.

Inserting a quote in this manner saves space compared to adding a Testimonial component. The Callout Box tucks the quote to the left or right of the page and allows the Text Area that follows to wrap around it, rather than displaying the quote across most of the page with subsequent text below.

 


Accordions

This is an accordion. It expands when you click on the title bar

Text within an accordion can be formatted using any of the toolbar options, including bulleted or numbered lists, block quotes, or different styles of typography. 

This Component has a variety of uses. They are most commonly used for FAQ, but also can be used for different academic subplans (e.g. B.S. degree subplan 1; B.S. degree suplan 2) or different areas within a major (e.g. core requirements; elective requirements). 

Accordions are great for saving space on your page, as they default to the collapsed position when a user visits your page. You have the ability to give your users the option to expand/collapse all. This is done by clicking the "Add Expand/Collapse All" checkbox at the top of the Accordion Component. 

You can have multiple

Here's a second Accordion. They stack on top of each other.

There are multiple styling options. This is the Secondary style.

The styling is the same as that of a secondary button link, whereas the Default style (above) displays similarly to a primary button link.

There are multiple styling options. This is the Light style.

The styling may vary by color palette.

Vertical Timelines

This is a Vertical Timeline, Expanded by Default

Timeline Item 1
Subheadings are optional and appear in italics

Vertical Timelines can showcase a variety of information:

  • Steps in a process or procedure. Each step would be its own timeline item, and the details and instructions would be included in the description.
  • Degree requirements. Each category of requirement (e.g. core courses, electives, capstone, etc.) would be its own timeline item, with the specific courses or requirements explained in the description.
  • How to declare a major or submit an application.
  • Provide a list. Examples include a list of award winners, publications, or important dates.
Additional Timeline Item 2

The description area can include different styles of typography by using the option in the toolbar above the text box. 

Example: Bold text with center alignment.

Breakout Box for REALLY important information, such as a deadline.

Add as many different items to your timeline as needed

Additional text in the description is optional!

This is the same Vertical Timeline, Collapsed by Default

Timeline Item 1
Subheadings are optional and appear in italics

Vertical Timelines can showcase a variety of information:

  • Steps in a process or procedure. Each step would be its own timeline item, and the details and instructions would be included in the description.
  • Degree requirements. Each category of requirement (e.g. core courses, electives, capstone, etc.) would be its own timeline item, with the specific courses or requirements explained in the description.
  • How to declare a major or submit an application.
  • Provide a list. Examples include a list of award winners, publications, or important dates.
Add as many different items to your timeline as needed

Additional text in the description is optional!

Additional Timeline Item 2

The description area can include different styles of typography by using the option in the toolbar above the text box. 

Example: Bold text with center alignment.

Breakout Box for REALLY important information, such as a deadline.

Spotlight(s)

Spotlight(s) can be tall or short. They can include an image that can be right- or left-aligned. They can also include a link, which appears as a secondary button. There are currently two design styles for Spotlight(s): Classic and Expanded. Multiple items can be added to spotlight(s), and users can scroll through them.

Spotlight(s) are a great way to highlight news or new publications. They can also be used to break up long sections of text, or as headings to introduce different areas within a degree program (e.g. different subplans).

Stanford main quad view from the oval

Tall Spotlight Right-aligned, Default color, Classic style

Content in a Spotlight is limited. Tall Spotlights allow 125 words (~625 characters) and Short Spotlights allow 60 words (~300 characters).

Text formatting options are more limited in a Spotlight than in a Callout Box or other Component types. Options include bulleted or numbered lists, a vertical line, or bold/italic text.

Stanford main quad view from the oval

Tall Spotlight Left-aligned, Gray color, Expanded style

Content in a Spotlight is limited. Tall Spotlights allow 125 words (~625 characters) and Short Spotlights allow 60 words (~300 characters).

Text formatting options are more limited in a Spotlight than in a Callout Box or other Component types. Options include bulleted or numbered lists, a vertical line, or bold/italic text.

Stanford main quad view from the oval

Short Spotlight left-aligned, gray background, Classic style

This is a Short Spotlight(s) with two items. Users can scroll between them.

Second Item in a Short Spotlight(s)

This Component can also be used without an image as a way to highlight text.

Stanford main quad view from the oval

Short Spotlight left-aligned, gray background, Expanded style

This is a Short Spotlight(s) with two items. Users can scroll between them.

Second Item in a Short Spotlight(s)

This Component can also be used without an image as a way to highlight text.

Testimonial

A testimonial gives a personalized touch to your content. You can include an optional image and/or link to more information. The quote can be top aligned (as it is here) or bottom aligned.
Governance Breakdowns: Facebook Files, Bill Gates & Credit Suisse with WSJ Reporter, Emily Glazer
glasses on book
This is a sample Testimonial that is bottom aligned.

Developer's Catalog (formerly called View)

A Developer's Catalog is a component which the H&S web team will use to build some events, news, courses, people and publication pages. You can ignore it!

We are also constantly growing the platform and adding new functionality. New features will continue to appear in your dropdown. 

Resources

Additional information, including step by step instructions for using the Components shown above can be found in our Drupal 9 Wiki Guide:
 

Testimonials

This is the updated testimonial styling for the colorful theme. Options include adding an image and/or a link. If an image is used, it will appear as a circle. The speaker's information can be added above or below the quote.
Stock photo of a person taking a photo of a grass covered mountain
Speaker Name
Professor
Stock photo of a person taking a photo of a grass covered mountain
Speaker Name
Professor
This is the updated Testimonial styling. There are options to include an image and/or a link. The speaker's information can be added above or below the quote.