Components

Service Card(React)

Display service image with title and description.

Version:	`14.16.0` •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

Sprinkler and Irrigation System Repair and Maintenance

67 Pros near you

Sprinkler and Irrigation System Repair and Maintenance

Let us help you keep your lawn green and your garden happy and healthy.

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

<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

Sprinkler and Irrigation System Repair and Maintenance

Let us help you keep your lawn green and your garden happy and healthy.

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

<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

Sprinkler and Irrigation System Repair and Maintenance

Let us help you keep your lawn green and your garden happy and healthy.

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

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