Service Card(Usage)

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.

Service card example

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.


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.

Service card min width
Service card max width

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


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

Service card 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.


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

Service card layout
Was this page helpful?

We use this feedback to improve the quality of our documentation.