Design, simply elegant.

The E*TRADE Design Language is a design system that provides a seamless experience from end to end.

March 27th release (2020.3.27)
Table mixins etrade.design We have exposed the mixins used to style design language tables for use in non-HTML tables.
Skeleton Loading design-language Updated height of skeleton block to match base text size.
Skeleton Loading etrade.design New Skeleton Loading page. We have added some guidance and examples of how to use are skeleton loading states.
Expand Collapse design-language-react We refactored the expand/collapse component. The inline styles was removed from the left margin. It now uses the defualt design-language CSS to set left margin.
Minimal navigation design-language-react We refactored the minimal navigation component to use Logo component for links.
Flyouts design-language-react We refactored flyouts component to use CSS for min-width setting instead of inline styles.
March 13th release (2020.3.13)
Localization react.etrade.design For the localization component in design-language-react, we added a useRtl custom hook to apply correct right-to-left classes when such support is necessary.
Tables react.etrade.design For the table component in design-lanugage-react, we added a skeleton loading state to the table component.
Cards react.etrade.design For the card component in design-language-react, we added a skeleton loading state to the card component.
Skeleton Block react.etrade.design In design-lanugage-react, we added skeleton block component for creating skeleton loading states.
Button react.etrade.design We fixed an issue in the design-language-react Shaky Button, where the initial event firing was not being triggering.
TextInput react.etrade.design For the TextInput component in design-language-react, we refactored the error prop to handle both the boolean and no content cases.
Toggles Design Language Styles In the design-language we fixed a css bug that prevented the inline toggles from being selected on small screens.
Typography Design Language Styles Updated the h3, h4 and h5 heading font sizing.
Selection list etrade.design For our new Selection List component, we added a NEW selection list component page to our documentation.
Brand guidelines etrade.design On the landing page, we have added a link (download) for the PDF of our brand guidelines.
React Application Template react-application-template In the react-application-template, we added the missing Col tag delimiter (>) for scaffold.