Cards group related information in a flexible-size container and serve as entry points to more detailed information. Cards come in two types: Service Cards and Form Cards.
Card Usage
Service Cards
Service Cards are used to display service offerings, like Home Cleaning, and will direct the user to a more detailed page about the service when clicked on. They can be displayed in multiple layouts depending on the service offering and page view.
Service Cards (4, 3-column display)
Form Cards
Form cards are used to display form content, like payment details; however, this is only true for desktop. On mobile web, card ui hides and form content remains.
Service Cards can be displayed in multiple formats: 3 column, 4 column, or 6 column. Card widths always align with the grid with 32px gutter between each one, while card heights are flexible and fit to the content.
Form Cards
​Form Cards come in two layouts: Wide, Primary cards and narrow, secondary car.