Fund search (vi20 )

Our Fund search component is a fund-specific search field used for aiding visitors to explore specific funds — the search drives them to either a pre-filtered product screener page, or directly to the specific product detail page.

You should use this component on a homepage, hub page or marketing page that is fund oriented.

A few key features include:

  • Choose between 2 brand colors for seamless transitions to the surrounding content
  • Ability to turn component-level top, bottom or both padding options on or off
    • Note: Use this is to solve “double” padding issues when stacking similar colored components together which may cause large gaps to appear, and get pre-approval for guidance from the Design Platform team

 


Publishing? View the DCR guidebook for detailed instructions.


Fund Search Bar-1,Paragraph-2,Advance Static Table-1
Paragraph-3,Image-1,Image-2
Paragraph-4,Headline-1,Fund Search Bar-2,Hub Tiles-1

Rules and recommendations

Rules and recommendations
Component elementOptional elementRules
Component elementA: Background color options Optional element Rules
  • BLK_White
  • BLK_Neutral
Component elementB: Padding options Optional element  Rules
  • Top padding: On / off
  • Bottom padding: On / off
  • Both Top & bottom padding: On / off
  • See “Appearance guide” tab for further instructions
Component elementC: Results panel Optional element Rules
  • Auto-populates as user types
  • Clicking on specific result drives to that product detail page
  • Clicking on “View all results” drives to a pre-filtered product screener page
Component element*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release Optional element Rules
Showing 1 to 4 of 4 entries