Collection Guide

When creating or editing a page, you can add a "Collection" of Components. Doing so will allow you to create a more customized page layout. 
﻿
Collections are most commonly used to group elements together. You can create a Collection in order to display multiple elements in the same row, for instance a row of four postcards across, three rows of three postcards across, or two columns of text side by side. A Collection can also be used to add a background color to the element(s) placed inside the collection. 
Examples of Collections in action can be found on our  Colorful Reference Site  and  Traditional Reference Site .
﻿
Jump to:
﻿ Add a Collection Component⁠ ﻿
﻿ How to Set up your Collection⁠ ﻿
Maintaining Accessibility:
﻿ Title and Title Settings⁠ ﻿
Designing the layout of your Collection:
﻿ Items per row⁠ ﻿
﻿ Background color⁠ ﻿
﻿ Raised cards⁠ and uniform height
Creating the content of your Collection: 
﻿ Items⁠ ﻿
Add a Collection ComponentTo add a collection click the "Add Component" button in the main area. 
﻿
Screenshot of the module to add a Component to a Flexible Page. The button for "Add Component" is outlined to highlight its location in the bottom left corner of the editing page.Screenshot of the module to add a Component to a Flexible Page. The button for "Add Component" is outlined to highlight its location in the bottom left corner of the editing page.
﻿
From the popup menu, select add Collection.
﻿
Screenshot of the resulting menu that pops up after "Add Component" is selected. There are 3 options partially visible and 3 options fully visible. The fully visible option of "Collection" is outlined to demonstrate this is the option users select to add a Collection Component.Screenshot of the resulting menu that pops up after "Add Component" is selected. There are 3 options partially visible and 3 options fully visible. The fully visible option of "Collection" is outlined to demonstrate this is the option users select to add a Collection Component.
﻿
How to Set up your Collection Think of creating a Collection as a three-step process.:
One step is creating the actual content of your Collection, e.g. adding Postcards or other  Items⁠ .
Another step is designing the layout of the items on the page. This is done by completing the following fields:  Items per row⁠ ,  Background color⁠ ,  Raised cards⁠ .
The third step is fitting the Collection into your page in a way that maintains its accessibility. This is achieved via the fields for  Title and Title Settings⁠ .
You can complete the fields in any order of your preference. If it's easier to conceptualize the Collection and its content first, it's OK to save the Title and Title Settings options for last, even though they appear first.
Once you've added a Collection component to your page, you will see a variety of fields. Let's look at each.
Title and Title SettingsThis is the accessibility piece of a Collection, and allows you the option of including a Heading 2 at the top. This feature keeps your page compliant with Accessibility requirements without having to add a separate heading in a Text Area above the collection, if one is needed.
Before we dive into Title and Title Settings, a bit of context may be helpful.
Background contextThe individual Components on a page combine together to form a single page heading structure. The page title is always a Heading 1. Below that, the next level of headings should be Heading 2s. Any sub-sections under a Heading 2 should be Heading 3s, and so on. Please see the ﻿ ⁠⁠The Top 10 Most Common Accessibility Missteps⁠  and the  SODA guide on Headings  for additional information on page and heading structure.
﻿
Because Collections can be placed in a variety of settings, the Collections interface now allows you to specify whether a title should be included and displayed as a Heading 2. 
﻿
Selecting the correct Title and Title Settings for your CollectionWhen adding a Collection component to your page, the first field you'll see asks about the Title Settings. 
﻿
Screenshot of the module to add a Collection. The first field, Title Settings, is outlined to highlight its location. It is shown in its default state, with "The Collection title should be visible as a Heading 2" selected from the dropdown menu.Screenshot of the module to add a Collection. The first field, Title Settings, is outlined to highlight its location. It is shown in its default state, with "The Collection title should be visible as a Heading 2" selected from the dropdown menu.
This dropdown menu contains 4 options. Because some of them are quite complex, we will only discuss two of the choices here. Please ignore the others.
If you are still confused, we would love to help! Please send a support ticket.
"The Collection title should be visible as a Heading 2"When you open a collection, the Title Setting will default to “The Collection title should be visible as a Heading 2,” as pictured above, and will include a field below where you can add a title. Keeping this option means that your Collection needs a Heading 2 above it and does not currently have one. The text that you add in the "Title" field will be rendered as that H2. 
﻿
When you select this option, your Collection will look like this:
﻿
Screenshot of a Collection formatted as three raised postcards in a row on a limited-width background. The Collection has a title within the background well which reads, "Collection Title as Heading 2."Screenshot of a Collection formatted as three raised postcards in a row on a limited-width background. The Collection has a title within the background well which reads, "Collection Title as Heading 2."
In this example, the title is clearly part of the Collection. Because we have chosen a background, we can see more clearly that the two pieces are related, as the title, which displays as a Heading 2, sits within the boundaries of the background color. Behind the scenes, the titles of the Postcards in this collection will be labeled as Heading 3s in order to keep the accessibility structure in tact.
﻿
"I've already created a Heading 2 above this Collection"If your collection will be housed within an area that already contains a heading (e.g. because you've added text as a Heading 2 or you've added a Color Band), you will select “I’ve already created a Heading 2 above this Collection.” The Title field will disappear, and you can continue creating your Collection.
﻿
Screenshot of the module to add a Collection. "I've already created a Heading 2 above the Collection" is selected in the Title Setting field, which is outlined.Screenshot of the module to add a Collection. "I've already created a Heading 2 above the Collection" is selected in the Title Setting field, which is outlined.
﻿
When you select this option, your Collection will look like this:
﻿
Screenshot of a Collection formatted as three raised postcards in a row on a limited-width background. The Collection sits below a Color Band, which functions as a Heading 2.Screenshot of a Collection formatted as three raised postcards in a row on a limited-width background. The Collection sits below a Color Band, which functions as a Heading 2.
In this case, the Collection was placed under a Color Band, which functions as a Heading 2. Since we already have a Heading for this area, we do not need another one in the Collection itself. We can see that the Collection is part of the "Program Details" heading as defined in the Color Band text.  Behind the scenes, the titles of the Postcards in this collection will be labeled as Heading 3s in order to keep the accessibility structure in tact.
Items per rowIn this dropdown, select the number of items that you want to fit across a single row. You can choose between 1, 2, 3, or 4 items. 
﻿
Screenshot of the module to add a Collection. The field to select number of items per row is outlined.Screenshot of the module to add a Collection. The field to select number of items per row is outlined.
﻿
As an example, If we have more than 3 items and we choose 3 items per row, then we will have 3 items for each line. Below is a picture of 8 items with 3 items per row setup. There is a space for a 9th item, but since we don't have one, that space is empty.
﻿
Screenshot of a Collection on a webpage. Eight identical images have been added, in rows of three across. This results in 2 rows of 3 images and 1 row of 2 images. The space where a 9th item would be found is empty.Screenshot of a Collection on a webpage. Eight identical images have been added, in rows of three across. This results in 2 rows of 3 images and 1 row of 2 images. The space where a 9th item would be found is empty.
Background ColorThis option allows you to choose whether or not a background will be added to your Collection. There are multiple colors from which to choose: Default (this will be determined by your website's theme and color palette), Gray, and Vibrant. 
Check out how the "default" background color will render on your website by playing with the different color palettes on  traditional  theme or  colorful .
﻿
Screenshot of the editing interface of a Collection. The dropdown for "Background Color" is outlined in yellow to indicate that users should click this option, which displays a dropdown list with options for none, default, gray, and vibrant.Screenshot of the editing interface of a Collection. The dropdown for "Background Color" is outlined in yellow to indicate that users should click this option, which displays a dropdown list with options for none, default, gray, and vibrant.
﻿
Below this box is an option for background color width. If a color is selected, you may choose limited-width, or full-width:
Limited width means the background color of your Collection will fit within the typical bounds of your main width region.  
﻿
Screenshot of a Collection with a limited-width background. The collection contains 3 identical postcards set on a gray background that only surrounds the Collection items rather than spanning the entire width of the page.Screenshot of a Collection with a limited-width background. The collection contains 3 identical postcards set on a gray background that only surrounds the Collection items rather than spanning the entire width of the page.
Full width means the background color behind your collection will span the entire left-right plane of the screen. Note: if your page has a sidebar menu, then both the full- and limited-width choices will appear the same.
﻿
Screenshot of a Collection with a full-width background. The collection contains 3 identical postcards set on a gray background that spans the entire width of the page.Screenshot of a Collection with a full-width background. The collection contains 3 identical postcards set on a gray background that spans the entire width of the page.
Raised Cards You have the option to make the Components within your Collection appear as raised cards. Doing so creates visual texture and makes the images appear more 3-dimensional.
﻿
Screenshot of the module to create a Collection. The slider option for Raised Cards is outlined, along with Help Text that reads, "Applies the raised cards styling to views, cards, timelines, and testimonials within a collection. This option is decorative."Screenshot of the module to create a Collection. The slider option for Raised Cards is outlined, along with Help Text that reads, "Applies the raised cards styling to views, cards, timelines, and testimonials within a collection. This option is decorative."
Raised cards with Postcard Components will look like this:
﻿
Screenshot of a Collection on a webpage. Eight identical images have been added, in rows of three across. The option for raised cards was selected, so these Postcards appear raised on the page.Screenshot of a Collection on a webpage. Eight identical images have been added, in rows of three across. The option for raised cards was selected, so these Postcards appear raised on the page.
﻿
Uniform HeightWhen "raised cards" is selected, an additional option will appear: uniform height. 
﻿
Screenshot of the interface to add a Collection. The toggle for "Raised Cards" is selected, which pulls up an additional option to toggle "Uniform Height." Screenshot of the interface to add a Collection. The toggle for "Raised Cards" is selected, which pulls up an additional option to toggle "Uniform Height." 
This purely decorative option allows you to choose whether or not all of your Collection items should be the same height across the row. This is accomplished by expanding the bottom of the shortest raised card(s) to be in line with the longest. Here are examples of how this will be displayed on your site:
﻿
Screenshot of two Collections each with 3 postcards formatted as raised cards. The Collections are identical in every way, except that the first is set so all postcards are the same height. The second does not have this formatting, and the first two postcards are considerably shorter than the third due to the difference in the amount of text.Screenshot of two Collections each with 3 postcards formatted as raised cards. The Collections are identical in every way, except that the first is set so all postcards are the same height. The second does not have this formatting, and the first two postcards are considerably shorter than the third due to the difference in the amount of text.
ItemsThis is the section where you add Component(s). Click the "Add Component" button and a popup menu will appear with all the Component options available to add to a Collection.
﻿
Screenshot of the module to add a Collection. The bottom section is outlined, showing the position where Items will be added, as well as the "Add Component" button.Screenshot of the module to add a Collection. The bottom section is outlined, showing the position where Items will be added, as well as the "Add Component" button.
﻿
Any of the following Components can be added to a Collection: 
Accordion
Banner Image
Banner Image with Full Overlay and Text
Postcard
Spotlight(s)
Testimonial
Text Area
Vertical Timeline
Developers' Catalog (note: if you wish to add this Component, please submit a  Help Ticket )
﻿
Screenshot of the menu that pops up when "Add Component" is selected to a Collection. The range of options is more limited than what can be added to a Flexible Page.Screenshot of the menu that pops up when "Add Component" is selected to a Collection. The range of options is more limited than what can be added to a Flexible Page.
﻿
This is how your editing page will look as you add Components to your Collection. There is no limit to the number of items that can be added, and you can mix and match, e.g. a Postcard and a Text Area or a Spotlight and a Vertical Timeline. Examples of collections with other Components can be found on the  Colorful  and  Traditional  Reference pages.
Please note: This example shows only vertical postcards, but you are able to mix and match Component types within a Collection. Feel free to play around with the layout!
﻿
Screenshot of the module to add Components to a Collection. In this example, 4 Postcard items have been added. They will be formatted as raised cards with no background, 2 items per row.Screenshot of the module to add Components to a Collection. In this example, 4 Postcard items have been added. They will be formatted as raised cards with no background, 2 items per row.
﻿
Once you are happy with the setup, click save. You have now added a Collection to your page! 
﻿