Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Card Usage
  • Service Cards
  • Form Cards
  • Card Layouts
  • Content Cards
  • Form Cards
  • Card Properties

Was this helpful?

  1. Web

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.

PreviousModals

Last updated 5 years ago

Was this helpful?

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.

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.

Card Layouts

Content Cards

Form Cards

Card Properties

background-color: White #FFFFFF;
border-radius: 5px;
border-style: solid;
border color: #E8EFF2;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2)

Refer to for more information.

Service Cards can be displayed in multiple formats: 3 column, 4 column, or 6 column. Card widths always align with the with 32px gutter between each one, while card heights are flexible and fit to the content.

come in two layouts: Wide, Primary cards and narrow, secondary car.

Forms
grid
Form Cards
Service Cards (4, 3-column display)