Cards

Style Guide

Search…

Handy Style Guide

Brand Guidelines

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.
Refer to Forms for more information. 
Card Layouts
Content Cards
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. 
Card Properties 
1
background-color: White #FFFFFF;
2
border-radius: 5px;
3
border-style: solid;
4
border color: #E8EFF2;
5
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2)
Copied!
​

Modals

Last modified 2yr ago

Copy link

Contents