Display service image with title and description.
Service cards act as a gateway for users starting their first project. They provide an exploratory experience, revealing the depth and breadth of our product. They cannot stand alone and are used in groups or “decks”.
In its most basic form, a Service card is an image with an 8:5 aspect ratio, a title, and description beneath it with an optional icon.
For optimum legibility, card decks should be presented on a white background.
The minimum width of a service card is 142px. Ideally, the card should never be larger than 460px. This ensures legibility on the smallest screens while not taking over the page on the larger screens.
Service cards are designed to fit anywhere. To make that happen we support two different page responsive wrapper types: fixed width (snap), and full width (fluid).
Supportive information helps set context for the user’s next experience. Information such as price, number of Pros, average star rating, and icons are examples of what can be shown to orient the user.
To minimize cognitive load, decks of cards should only contain similar card types. For example, cards with cost information should only be grouped with other cost cards.
They also link exclusively to the pages associated to the information type. Cards with price information should link to cost pages; cards with number of local pros should link to “Near me” pages.