Accordion within Module Container
The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.
Stack of Accordions
The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.
The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.
The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.
Alerts



Required fields
Please provide your last name.
Email is formatted incorrectly.
Buttons









Button Groups



Here is where we want an accurate description about the data displayed and/or the table's intent
CHRS 20.13
GWW 11.52
MTG 9.08
UAL 8.79
ERIC 8.25
Data Tables
Here is where we want an accurate description about the data displayed and/or the table's intent
Index
Value
Change
Change %
Morningstar US Market 7,097.90 16.69 0.24
Morningstar Small Cap 10,489.35 27.00 0.26
Morningstar Wide Moat Focus 9,190.98 −17.61 −0.19
S&P 500 2,815.62 6.07 0.22
DJIA 25,199.29 79.40 0.32
NASDAQ 7,854.44 −0.67 −0.01
Dialogs
Forms
Sign Up Required fields
Please provide your last name.
We’ll never share your email with third parties.
Would you like to sign up for our newsletter? We won’t send you more than one email a week.



Address Required fields
Loaders



Modals



Module Containers

Header Title

[Your content here.]
Navigation Containers

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien ipsum pellentesque.
Popovers
Steppers
Switches