Service Card

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”.

Types

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.

Sizes & truncation

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.

Tip

It's a best practice to have roughly 36 characters or fewer for titles and descriptions. Each supports text wrapping up to two lines. Titles will truncate at two lines.

Responsive options

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).

Tip

When using full width card decks, it’s best to use an even number of cards to prevent orphan cards in a layout.

Supportive information

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.

Suggestion

To introduce a deck of cards with differing supporting information, there should be a break in content to separate ideas.