Components

Service Card(React)

Display service image with title and description.

Version:6.1.0 View sourceChangelogReport 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

<div style={{ display: 'flex' }}>
    <div style={{ maxWidth: 300, margin: 8 }}>
        <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
            <ServiceCardImage
                alt="Sprinkler and Irrigation System Repair and Maintenance"
                src="https://d1vg1gqh4nkuns.cloudfront.net/i/318810408927723609/width/1024/aspect/8-5.jpeg"
            />
            <ServiceCardTitle>
                Sprinkler and Irrigation System Repair and Maintenance
            </ServiceCardTitle>
            <ServiceCardDescription icon={<ContentModifierMapPinSmall />}>
                67 Pros near you
            </ServiceCardDescription>
        </ServiceCard>
    </div>
    <div style={{ maxWidth: 300, margin: 8 }}>
        <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
            <ServiceCardImage
                alt="Sprinkler and Irrigation System Repair and Maintenance"
                src="https://d1vg1gqh4nkuns.cloudfront.net/i/318810408927723609/width/1024/aspect/8-5.jpeg"
            />
            <ServiceCardTitle>
                Sprinkler and Irrigation System Repair and Maintenance
            </ServiceCardTitle>
            <ServiceCardDescription icon={<MetaCategoryPersonalSmall />}>
                Let us help you keep your lawn green and your garden happy and healthy.
            </ServiceCardDescription>
        </ServiceCard>
    </div>
</div>

Without icon

<div style={{ maxWidth: 300 }}>
    <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
        <ServiceCardImage
            alt="Sprinkler and Irrigation System Repair and Maintenance"
            src="https://d1vg1gqh4nkuns.cloudfront.net/i/318810408927723609/width/1024/aspect/8-5.jpeg"
        />
        <ServiceCardTitle>Sprinkler and Irrigation System Repair and Maintenance</ServiceCardTitle>
        <ServiceCardDescription>
            Let us help you keep your lawn green and your garden happy and healthy.
        </ServiceCardDescription>
    </ServiceCard>
</div>

With optional props for anchor

<div style={{ maxWidth: 300 }}>
    <ServiceCard
        url="https://www.thumbtack.com/k/massage/near-me/"
        shouldOpenInNewTab
        onClick={e => console.log(e)}
    >
        <ServiceCardImage
            alt="Sprinkler and Irrigation System Repair and Maintenance"
            src="https://d1vg1gqh4nkuns.cloudfront.net/i/318810408927723609/small/standard/hero"
        />
        <ServiceCardTitle>Sprinkler and Irrigation System Repair and Maintenance</ServiceCardTitle>
        <ServiceCardDescription>
            Let us help you keep your lawn green and your garden happy and healthy.
        </ServiceCardDescription>
    </ServiceCard>
</div>

Props

ServiceCard

  • url
    required

    URL pointing to the card link destination.

    Type
    string
  • children
    required

    Accepts content of ServiceCardImage, ServiceCardTitle, ServiceCardDescription.

    Type
    node
  • onClick

    Handler for click events

    Type
    func
    Default
    null
  • shouldOpenInNewTab

    Opens the URL in a new tab when clicked.

    Type
    bool
    Default
    false

ServiceCardDescription

  • children
    required

    Service description or other service info.

    Type
    node
  • icon

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

    Type
    node
    Default
    undefined
  • iconColor

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

    Type
    oneOf([
      'blue',
      'green',
    ])
    Default
    'blue'

ServiceCardTitle

  • children
    required

    Service title.

    Type
    node

ServiceCardImage

  • 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
    Default
    undefined
  • src

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

    Type
    string
    Default
    undefined
  • 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
    arrayOf
    Default
    undefined
  • alt

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

    Type
    string
    Default
    undefined