Dropdown with Links

Layout Variant: SE006

Content Type: Collection

Aspect Ratio:

• N/A

Expected Use:

• The primary use of this component is to provide a drop down search that features an area for text, a dropdown with selections and a CTA button.
• “Search bar is comprised of three subcomponents: dropdown, text field, and search command button. Dropdown values are customizable. Text field is initially populated with instructional text. On selection of a dropdown value, text field populates with value. On subsequent selection of search command button, page corresponding to dropdown value opens. “Utilized for dropdown search where links are required.

How to Build:

For SE006 Collection, include a Teaser Title and Teaser Text (body copy) for the component. Add a "Search" CTA that allow user to the selected item(s) in the dropdown. This is entered in the Call-to-Action-Button section with the radio button selection of "Use Linked Call-to-Action Label" if you wish to use the CTA label from your teasable content or the radio button with selection of "Use both Custom & Linked Call-to-Action Label" where you will drop your teasable content along with entering your custom CTA label. Teaser Header and Image are not used in this component. 

For this Collection, add the following:

• Create a new Struct List named "dropdowns"
• Create new Structs under the new dropdowns Struct List that correspond to the dropdown menus that will appear on the page
• Create String entries on the new Structs. The first entry should be the label for the dropdown. For example:
  • property: "SELECT", Value: "Enter a string here"
  • property: "<Specify Label>", Value: 1
  • property: "<Specifyl Label>", value: 2
  • etc.

Note that you have the option to pick and choose a preferred "Background Color" under the Content Tab. You also need to add on the System Tab, Local Settings an "Integer" Type, set property label to "callToActionState" and set the value to "3". This sets the background color to span the whole width of the collection.