C10 Suggestive dropdown list

The Suggestive Dropdown List component provides a curated list of conditions, services, or topics. It includes a headline and support copy above the dropdown, helping users quickly find and select relevant items from the list.

 

Component requirements

Required:

  • Headline: Text field.
  • Headline tag: H2/H3/H4/P. Default: P.
  • Content alignment: Dropdown. Left/center. Default: Left.
  • Background: Dropdown. White/White smoke. Default: White smoke.
  • List of links: Selection (defines which links appear in the list).

Optional:

  • Support copy: Rich text field.

  • CTA: Appears as a link below the dropdown. Text field along with associated link type (internal/external/anchor/email/phone). 

Content guidance

Currently this component is used mainly on the Aurora Health Care service line pages. See example on cancer care landing page.

Writing H1

  • The H tag should directly and clearly state what the suggestive dropdown list is about. Use sentence case.
  • Suggested H tag:
    • What condition can we help you find?
    • What service can we help you find?

ADA requirements

  • The dropdown is fully keyboard accessible.
  • Proper ARIA roles and attributes need to be used.
  • Dropdown should have a clear label.
  • Visual cues should be used to indicate focus, selection, and disabled options.