Thumbprint logo

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