Service Card
Display service image with title and description
8:5 aspect ratio
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
requiredURL pointing to the card link destination.
Typestring
children
requiredAccepts content of
ServiceCardImage
,ServiceCardTitle
,ServiceCardDescription
.TypeReact.ReactNode
onClick
Handler for click events
Type() => void
shouldOpenInNewTab
Opens the URL in a new tab when clicked.
Typeboolean
Defaultfalse
ServiceCardDescription
children
requiredService description or other service info.
TypeReact.ReactNode
icon
Icon from Thumbprint Icons to render within the service card. It must be one of the small icons.
TypeReact.ReactNode
iconColor
Color options for icon. Only required if you want to override default color.
Type'blue' | 'green'
Default'blue'
ServiceCardTitle
children
requiredTypestring
ServiceCardImage
src
requiredURL pointing to image to be displayed. This image must have an aspect ratio of 8:5.
Typestring
url
deprecatedURL pointing to image to be displayed. This image must have an aspect ratio of 8:5.
Note:
Use
src
instead ofurl
.Typestring
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.
TypeImageSource[]
alt
Image alt tag that's passed to
aria-label
for better accessibility.Typestring