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

Confused?

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

Collections

Click your site's color palette from the left sidebar to see how each Component will look on your website.

Jump to:

Collection Basics
Collection of Postcards
Collection of Accordions
Collection of Vertical Timelines
Collection of Text Areas
Collection of Testimonials
Resources

What is a Collection?

Simply stated, a Collection is a way of grouping Components. Within a Collection, you can place items in a grid and include anywhere from 1-4 items per row.

There are limited options of which Components can be added into a Collection. The choices include:

Postcard
Accordion
Vertical Timeline
Text Area
Testimonial
Banner Image(s) (note: although this option is available to use, it is not recommended)
Developer's Catalog (note: This is not a commonly used Component and is mostly used by the web development team. You do not need to worry about this one!)

Choosing Components for a Collection

Within this list of choices, some Components work better than others. We recommend sticking with Postcards, Accordions, Vertical Timelines, and Text Areas in your Collections.

They don't need to be the same! Although using multiple of the same Component in your Collection works best from a formatting and style perspective, you can mix and match within a Collection. The most common way of mixing is through the use of Postcards, for example some Horizontal Cards and some Vertical Cards.

Collection of Postcards

Postcards are the most commonly used Component within a Collection. 1-4 Postcards (Horizonal, Vertical, or Vertical Linked) can be displayed per row. The benefit of using a Collection of Postcards, even when only 1 Postcard is to be used, is that you have the option for a raised display.

Here is an example of a Collection of 4 Vertical Postcards with 2 per row. They are on a traditional "flat" background.

Stock photo of a person taking a photo of a grass covered mountain

This is a Vertical Card

It has limited text area styling.

stock photo of glasses on a stack of paper

This is another Vertical Card

The link is optional.

Gray Stanford tree on a light gray background

This is a Vertical Card with link and without text

One more Vertical Postcard

Text here.

Here is an example of a Collection of 2 Horizontal Postcards, 1 per line, using the raised background.

Spectrum PHS Pilot Grants Research Seminar

This is a Horizontal Postcard with Image

Home Page

It is on a raised background.

Another Horizontal Postcard

Home Page

This one has no media and is an example of a postcard with just text on a raised background.

You can mix and match the types of Postcards included in a Collection, for example using some Vertical Postcards and Some Vertical Linked Postcards.

Vertical Postcard

This is a vertical postcard and there are two of them on this row. It doesn't include a link.

Vertical Postcard

This is a vertical postcard and there are two of them on this row. It doesn't include a link.

Vertical Linked Postcard

This is a Vertical Linked Postcard and there are two of them on this row. It includes a link.

Vertical Linked Postcard

This is a Vertical Linked Postcard and there are two of them on this row. It includes a link.

Additional examples of Collections of Postcards

Collection of Accordions

Accordions are another Component that can be added into a Collection. This makes sense if you have Accordions with limited content in the body because, when expanded, the content will only span part of the width of the page.

Here are two nearly identical examples of 6 Accordions in a Collection, 3 across. They take up less space on the page than if they were stacked in 6 rows, but are much longer when they are expanded. Although there is an option for "raised cards" when creating a Collection, there is no difference in appearance if the Collection contains only Accordions. Example 1 includes the option for your users to "expand/collapse all" accordions. Example 2 is identical, but without that option.

Example 1:

Accordion 1

This is the first Accordion in this Collection. It has very little text.

Accordion 2

Another Accordion with just a short line of text.

Accordion 3

One more short text Accordion.

Accordion 4

This is an example of an Accordion with a lot of text in the body. When added to a Collection with 3 items across, the expanded Accordion takes up considerable space on the page. (Sample text below)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed vulputate mi sit amet mauris commodo quis imperdiet. Odio euismod lacinia at quis. Odio morbi quis commodo odio. Justo nec ultrices dui sapien eget mi proin. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Pretium lectus quam id leo. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Id nibh tortor id aliquet lectus proin nibh. Tortor vitae purus faucibus ornare suspendisse.

Sit amet porttitor eget dolor. In fermentum et sollicitudin ac orci phasellus egestas. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Faucibus a pellentesque sit amet porttitor eget dolor. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Amet luctus venenatis lectus magna. Accumsan in nisl nisi scelerisque. In hendrerit gravida rutrum quisque. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Aliquam malesuada bibendum arcu vitae. Nec sagittis aliquam malesuada bibendum arcu. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Semper viverra nam libero justo laoreet sit amet cursus sit. Et ligula ullamcorper malesuada proin. Sit amet tellus cras adipiscing enim. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.

Accordion 5

This is an example of an Accordion with a lot of text in the body. When added to a Collection with 3 items across, the expanded Accordion takes up considerable space on the page. (Sample text below)

Accordion 6

This is an example of an Accordion with a lot of text in the body. When added to a Collection with 3 items across, the expanded Accordion takes up considerable space on the page. (Sample text below)

Example 2:

Accordion 1

This is the first Accordion in this Collection. It has very little text.

Accordion 2

Another Accordion with just a short line of text.

Accordion 3

One more short text Accordion.

Accordion 4

This is an example of an Accordion with a lot of text in the body. When added to a Collection with 3 items across, the expanded Accordion takes up considerable space on the page. (Sample text below)

Accordion 5

This is an example of an Accordion with a lot of text in the body. When added to a Collection with 3 items across, the expanded Accordion takes up considerable space on the page. (Sample text below)

Accordion 6

This is an example of an Accordion with a lot of text in the body. When added to a Collection with 3 items across, the expanded Accordion takes up considerable space on the page. (Sample text below)

Collections of Vertical Timelines

While not common, it is possible to add Vertical Timelines to a Collection. The recommended use of this combination is when you have a two processes that are similar in nature, and you want to highlight the differences.

The example below might appear on an academic advising page where you walk a student through the process of declaring their major. There may be two paths the student can take, so the process steps are in side by side Vertical Timelines.

Example 1 uses a traditional flat background:

Declaring the General Major

Select a Major Advisor

Choose any faculty member from within the department to serve as your advisor.

Complete the Major Declaration Form

Link to the Major Declaration Form.

Submit your Form

Email your signed Major Declaration Form to email [at] stanford.edu (email[at]stanford[dot]edu).

Declare the Major in Axess

Visit the student section of Axess and declare the major.

Declaring the Major with a Concentration

Select a Major Advisor

Choose a faculty member from within the department who conducts research in your Concentration to serve as your advisor.

Complete the Major Declaration Form

Link to the Major Declaration Form.

Submit your Form

Email your signed Major Declaration Form to email [at] stanford.edu (email[at]stanford[dot]edu).

Declare the Major and Concentration in Axess

Visit the student section of Axess and declare the major and area of concentration.

Example 2 displays the same content, but on a raised background:

Declaring the General Major

Select a Major Advisor

Choose any faculty member from within the department to serve as your advisor.

Complete the Major Declaration Form

Link to the Major Declaration Form.

Submit your Form

Email your signed Major Declaration Form to email [at] stanford.edu (email[at]stanford[dot]edu).

Declare the Major in Axess

Visit the student section of Axess and declare the major.

Declaring the Major with a Concentration

Select a Major Advisor

Choose a faculty member from within the department who conducts research in your Concentration to serve as your advisor.

Complete the Major Declaration Form

Link to the Major Declaration Form.

Submit your Form

Email your signed Major Declaration Form to email [at] stanford.edu (email[at]stanford[dot]edu).

Declare the Major and Concentration in Axess

Visit the student section of Axess and declare the major and area of concentration.

Collection of Text Areas

There may be times that you want your webpage split into columns. The easiest way to accomplish this is to create a Collection with the desired number of columns, up to a maximum of 4. Checking the box for raised cards doesn't have any impact on the display.

Text Area 1

The appearance of this Text Area is going to look very similar to a Postcard without an image. However, Text Areas offer more styling options.

Text Area 2

Since these text boxes appear in a row across, they take up less space on your page top to bottom.

Text Area 3

The formatting can get tricky if the text in the various boxes is different in length. For instance, this box contains considerably more text than the other two. My page isn't going to look as clean if the amount of content is lopsided.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna nunc. Dui ut ornare lectus sit. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit.

Collection of Testimonials

Adding Testimonials to a Collection is a great way to save space, especially for shorter quotes without media. Here is an example of 3 across on a traditional flat background:

Collections are awesome!

User 1

Finance

User 2

Student Servies

I love managing content on my department's website!

This user guide has helped me feel confident when updating my pages.

User 3

DFO

Here is an example with 2 across on a raised background.

I love managing content on my department's website!

User 2

Student Servies

User 3

DFO

This user guide has helped me feel confident when updating my pages.

Resources

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

This is a Banner Image with Full Overlay and Text

Switch color palette

Canyon

Cardinal

Cliff

Lake

Mountain

Ocean

Confused?

Collections

What is a Collection?

Choosing Components for a Collection

Collection of Postcards

This is a Vertical Card

This is another Vertical Card

This is a Vertical Card with link and without text

One more Vertical Postcard

This is a Horizontal Postcard with Image

Another Horizontal Postcard

Vertical Postcard

Vertical Postcard

Vertical Linked Postcard

Vertical Linked Postcard

Collection of Accordions

Collections of Vertical Timelines

Declaring the General Major

Declaring the Major with a Concentration

Declaring the General Major

Declaring the Major with a Concentration

Collection of Text Areas

Collection of Testimonials

Resources