CTA: Dropdown

This component allows users to select from a range of options from a list. 

Usage Criteria

This component allows users to select from a range of options on a list, which then introduces more content depending on what was selected.

Do's and Don'ts

  • Do not put multiples of this component directly side by side or stacked. If there are multiple CTA buttons on a page, please have some dividing content in between the components.

Design Notes

Please note that this component is not meant for filling out forms. There is a different dropdown used for forms. CTA: Dropdown is more for the purposes of providing content to a user.

Configurable Options

This component is configured using Child pagesFixed list, Search or Tags. Fixed list pages will always stay the same, whereas tags will retrieve pages related to that tag. Search pulls pages related to the search query entered, and Child pages pull from a set parent page.

Once configured, the dropdown will automatically be populated.

Developer Notes

Type
Name
AEM Component Name

CTA: Dropdown

Code Base Name

dropdown-nav

resourceSupertype

bclccorporate/components/content/list

SCSS Attributes

dropdown-nav.scss

JavaScript

dropdown-nav.js

Status

Released (RC 1)

Version

Code Base v1.0

Designer Notes

Type
Name
Sketch Component Name

BCLC_Corporate_Designs/components/cta/button/dropdown

Sketch Responsive Sizes

Desktop HD - Desktop, Tablet - Mobile

Status

Released (Master)

Version

Design 1.0