This is a Banner Image with Full Overlay and Text

One image is used with overlaid text. The overlay color can be selected from several choices, depending on your site's theme and color palette.

A link can also be included

Switch color palette

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

 

 

 

 

Canyon

 

Cardinal colors

 

 

 

 

Cardinal

 

 

 

 

 

Cliff

 

 

 

 

 

Lake

 

 

 

 

 

Mountain

 

 

 

 

 

Ocean

 

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.

This is a Vertical Card

It has limited text area styling. 

This is another Vertical Card

The link is optional. 

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. 

Geophysics Seminar: Dr. Jean-Luc Margot

Vertical Postcard

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

Geophysics Seminar: Dr. Jean-Luc Margot

Vertical Postcard

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

Geophysics Seminar: Dr. Jean-Luc Margot

Vertical Linked Postcard

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

Geophysics Seminar: Dr. Jean-Luc Margot

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)

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 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)

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.

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)

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)

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 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)

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.

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:
 

Back to Top