Style Boxes show the investment style of a group of holdings. They are a key piece of Morningstar intellectual property and must be displayed consistently across all implementations.
Use to represent the investment style of equity holdings (i.e., stocks and stock funds) as a relationship between market capitalization, and growth vs. value factors.
Use to represent the investment style of fixed income holdings (i.e., fixed income funds or portfolios) as a relationship between credit quality and sensitivity to changes in interest rates.
The responsive behavior for the Style Box takes a desktop-first approach. As the size of the Style Box’s container reduces, the chart’s internal components will adjust to more efficiently use the available space.
Container Width |
Result |
---|---|
|
The label sizes reduce, and internal padding between elements tightens. |
|
The label sizes and internal padding reduce again. |
|
The label sizes and internal padding reduce again. |
|
Labels are removed. |
Necessary code documentation for each variation can be found in the MBC repository: