Hero With Tabs
Hero with tabs
Example:
Find Strategic ETFs
Browse by Strategy or Topic
Select an ETF Category
Config:
{
"theme": "dark-blue",
"header": "Find Strategic ETFs",
"menuItems": [
{
"label": "Strategic ETFs"
},
{
"label": "About Geared Funds",
"to": "#"
},
{
"label": "Funds by Category",
"to": "#"
},
{
"label": "Fund Screener"
}
],
"insightsTabs": {
"className": "insights-tabs",
"tabs": [
{
"label": "Browse by Strategy or Topic",
"id": "strategy-topic",
"insightsDefaultFilter": {
"buttonLabel": "Select an ETF Category",
"modalId": "select-dropdown",
"options": [
{
"label": "All ETFs (45)",
"id": "all-etf"
},
{
"label": "Thematic (15)",
"id": "thematic"
},
{
"label": "Alternative (8)",
"id": "alternative"
},
{
"label": "Dividend Growers (8)",
"id": "dividend-growers"
},
{
"label": "Ex-Sector (4)",
"id": "ex-sector"
},
{
"label": "Volatility (4)",
"id": "volatility"
},
{
"label": "Fixed Income (2)",
"id": "fixed-income"
},
{
"label": "Interest-Rate Hedge (2)",
"id": "interest-rate-hedge"
},
{
"label": "Digital Assets (1)",
"id": "digital-assets"
},
{
"label": "Rising Rates (1)",
"id": "rising-rates"
}
]
}
}
]
}
}
Hero with CTA with tabs
Example:
Find Strategic ETFs
Browse by Strategy or Topic
Select an ETF Category
Config:
{
"theme": "dark-blue",
"header": "Find Strategic ETFs",
"cta": {
"label": "Find Geared ETFs",
"to": "#",
"bgColor": "light-purple"
},
"insightsTabs": {
"className": "insights-tabs",
"tabs": [
{
"label": "Browse by Strategy or Topic",
"id": "strategy-topic",
"insightsDefaultFilter": {
"buttonLabel": "Select an ETF Category",
"modalId": "select-dropdown",
"options": [
{
"label": "All ETFs (45)",
"id": "all-etf"
},
{
"label": "Thematic (15)",
"id": "thematic"
},
{
"label": "Alternative (8)",
"id": "alternative"
},
{
"label": "Dividend Growers (8)",
"id": "dividend-growers"
},
{
"label": "Ex-Sector (4)",
"id": "ex-sector"
},
{
"label": "Volatility (4)",
"id": "volatility"
},
{
"label": "Fixed Income (2)",
"id": "fixed-income"
},
{
"label": "Interest-Rate Hedge (2)",
"id": "interest-rate-hedge"
},
{
"label": "Digital Assets (1)",
"id": "digital-assets"
},
{
"label": "Rising Rates (1)",
"id": "rising-rates"
}
]
}
}
]
}
}
Hero with CTA without tabs
Example:
How To Buy
Config:
{
"theme": "blue",
"header": "How To Buy",
"cta": {
"label": "How to Buy Geared ETFs",
"to": "#",
"bgColor": "light-purple"
}
}
Blue Hero with CTA without tabs
Example:
How To Buy
Config:
{
"theme": "light-purple",
"header": "How To Buy",
"cta": {
"label": "How to Buy Geared ETFs",
"to": "#",
"bgColor": "blue"
}
}
Hero with CTA without tabs
Example:
How To Buy
Config:
{
"theme": "light-purple",
"header": "How To Buy",
"cta": {
"label": "How to Buy Geared ETFs",
"to": "#",
"bgColor": "blue"
}
}