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.
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options |
|
|||
| B: Padding options |
|
|||
| C: Results panel |
|
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
Padding options
We have built in the ability to turn component-level top, bottom, or both padding options on or off. This is to solve “double” padding issues when stacking similar colored components that are related topic-wise.
Example: If you are using a component that has 80px of bottom padding, and you pull in a separate component right below it that has 80px top padding, then you’ll get a large gap of “negative” space. You can turn off either the top or bottom padding to reduce the gap (not all components have this ability of on/off padding selections), and allow the user to visually understand these two components are part of one single topic.
NOTE: This should only be used when stacking similar colored components together. Please get pre-approval for guidance from the Design Platform team.
Padding examples
In the two examples below, we are illustrating what this may look like, and what the recommended options are for the optimal visual spacing.
Color pairing
In the two examples below, we are illustrating what this may look like, and what the recommended options are for the optimal visual spacing.
“Usage” best-practice
Since this component is only a “search” field, you’ll most likely need to sandwich this between our headline component above (for user-context), followed by something like our hub tile or related material component below. This is easy to do with all of the flexibility we built in to our vi20 components.
Example: In the below example, we are using 3 components to accomplish this, with these steps for optimal padding:
Headline component:
- The Publishing documentation is here
- “XL” size for the headline (you choose what suits your needs)
- Intro/description is also implemented in this component
- BlackRock Neutral for the color option
Fund search component:
- The Publishing documentation is here
- “Hide top padding” should be selected in the DCR
- BlackRock Neutral for the color option
Hub tiles component:
- The Publishing documentation is coming soon
- “Hide top padding” should be selected in the DCR
- BlackRock Neutral for the color option
Funds that match up with investing goals and values
Each investor has a different story, and we are steadfast partners to our clients in the UK because we listen to every one of them. Our full range of funds is one way we’re helping more investors build solid financial futures.
When you invest in an equity, you buy a share in a company and become a shareholder. Equities are typically best for long-term investing – for those who can ride out the highs and lows of the market in search of higher rewards.
Fixed income securities, or bonds, are issued by companies and governments as a way of raising money. They’re basically an ‘I.O.U’ – designed to provide a regular stream of income (which is normally a fixed amount) over a specified period of time.