21 packages
action-links
A pattern where the confirm (move-forward) is positioned next to a cancel (stop or go back).
content-card
A basic card pattern with areas for header, body, and footer content
modal-utility
A set of functions that allow creating accessible modals.
scroll-test
Provides a function to allow testing whether a user has scrolled past an element or to the bottom of the viewport.
@sparkdesignsystem/spark
Spark is the main package for the Spark Design System. This package contains the JavaScript and components that make up the basic interfaces for Rocket Mortgage Fintech products.
@sparkdesignsystem/spark-angular
A collection of Spark Design System components in Angular 6+
@sparkdesignsystem/spark-card
Cards present related content. They provide an easy way to get information quickly and are typically used in groups.
@sparkdesignsystem/spark-core
Spark Core is the main package for the Spark Design System. This package contains the style and components that make up the basic interfaces for Quicken Loans Fintech products.
@sparkdesignsystem/spark-core-angular
A collection of Spark Design System components in Angular 6+
@sparkdesignsystem/spark-description-table
Spark Description Table is a package that is part of Spark Extras, a supplementary package that adds additional components that are not part of Spark Core.
@sparkdesignsystem/spark-dictionary
Spark Dictionary is a component for displaying key value pairs.
@sparkdesignsystem/spark-extras
Spark Extras is a supplementary package that adds additional components that are not part of Spark Core. Many sites will use these components, but they aren't necessary for every Quicken Loans Fintech product.
@sparkdesignsystem/spark-extras-angular-award
The Award component showcases awards in a vertically stacked layout that switches to side by side on larger screens.
@sparkdesignsystem/spark-extras-angular-card
Cards present related content. They provide an easy way to get information quickly and are typically used in groups.
@sparkdesignsystem/spark-extras-angular-dictionary
This component is intended for displays of key-value pairs.
@sparkdesignsystem/spark-extras-angular-highlight-board
The Highlight Board component is used as a lead into an experience as a means to encourage engagement within the experience.
@sparkdesignsystem/spark-highlight-board
The Highlight Board component is used as a lead into an experience as a means to encourage engagement within the experience.
@sparkdesignsystem/spark-react
A collection of Spark Design System components in React 16+
@sparkdesignsystem/spark-styles
Styles for Spark Design System.
sticky-layout
Attaches an element to the top or bottom of the viewport, fixed in place, independent of scroll.
tile-layout
A layout pattern for formatting html content into 3x1 and 2x1 tiles