Components

Service Card(React)

Display service image with title and description.

Version:14.18.2 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { ServiceCard, ServiceCardDescription, ServiceCardTitle, ServiceCardImage } from '@thumbtack/thumbprint-react';

8:5 aspect ratio

This component uses a placeholder that expects an image in an 8:5 aspect ratio. If a different aspect ratio is used the mismatch will cause a layout shift when the image loads.

With icon

Without icon

With optional props for anchor

Props

ServiceCard

  • url
    required

    URL pointing to the card link destination.

    Type
    string
  • children
    required

    Accepts content of ServiceCardImage, ServiceCardTitle, ServiceCardDescription.

    Type
    React.ReactNode
  • onClick

    Handler for click events

    Type
    () => void
  • shouldOpenInNewTab

    Opens the URL in a new tab when clicked.

    Type
    boolean
    Default
    false

ServiceCardDescription

  • children
    required

    Service description or other service info.

    Type
    React.ReactNode
  • icon

    Icon from Thumbprint Icons to render within the service card. It must be one of the small icons.

    Type
    React.ReactNode
  • iconColor

    Color options for icon. Only required if you want to override default color.

    Type

    This prop can be one of the following 2 types:

    • 'blue'
    • 'green'
    Default
    'blue'

ServiceCardTitle

  • children
    required
    Type
    string

ServiceCardImage

  • src
    required

    URL pointing to image to be displayed. This image must have an aspect ratio of 8:5.

    Type
    string
  • url
    deprecated

    URL pointing to image to be displayed. This image must have an aspect ratio of 8:5.

    Note: Use `src` instead of `url`.

    Type
    string
  • sources

    Allows the browser to choose the best file format and image size based on the device screen density and the width of the rendered image. Images must have an aspect ratio of 8:5.

    Type
    ImageSource[]
  • alt

    Image alt tag that’s passed to aria-label for better accessibility.

    Type
    string