Cards
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.
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 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.
%201x.png?alt=media&token=b7321072-2346-4297-aa82-88d5deed7bf7)
background-color: White #FFFFFF;
border-radius: 5px;
border-style: solid;
border color: #E8EFF2;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2)
Last modified 3yr ago