Service Card

Display service image with title and description

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/djs/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/djs/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/djs/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/djs/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
'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