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.
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
Background Color Options for Collections
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.
It has limited text area styling.
This is another Vertical Card
The link is optional.
Text here.
Here is an example of a Collection of 2 Horizontal Postcards, 1 per line, using the 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)
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.
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.
Here is an example with 2 across on a raised background.
Default Background
Postcard 1
Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum fermentum venenatis montes suspendisse lacinia consectetur. Sollicitudin morbi cras purus justo sociosqu platea proin suspendisse? Curae quis torquent tellus magna, aliquam quis iaculis.
Postcard 2
Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum fermentum venenatis montes suspendisse lacinia consectetur. Sollicitudin morbi cras purus justo sociosqu platea proin suspendisse? Curae quis torquent tellus magna, aliquam quis iaculis.
Gray Background
Postcard 1
Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum fermentum venenatis montes suspendisse lacinia consectetur. Sollicitudin morbi cras purus justo sociosqu platea proin suspendisse? Curae quis torquent tellus magna, aliquam quis iaculis.
Postcard 2
Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum fermentum venenatis montes suspendisse lacinia consectetur. Sollicitudin morbi cras purus justo sociosqu platea proin suspendisse? Curae quis torquent tellus magna, aliquam quis iaculis.
Vibrant Background
Postcard 1
Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum fermentum venenatis montes suspendisse lacinia consectetur. Sollicitudin morbi cras purus justo sociosqu platea proin suspendisse? Curae quis torquent tellus magna, aliquam quis iaculis.
Postcard 2
Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum fermentum venenatis montes suspendisse lacinia consectetur. Sollicitudin morbi cras purus justo sociosqu platea proin suspendisse? Curae quis torquent tellus magna, aliquam quis iaculis.
Resources
Additional information, including step by step instructions for using Collections and the other Components shown above can be found in our Wiki Guide: