@thumbtack/tp-ui-react-service-card

package: '@thumbtack/tp-ui-react-service-card' kit: component/service-card.yaml platform: react

url: /api/components/component/service-card/react/

Service Card

Notes:

• Cards should be shown in a responsive grid with 3 or 4 per row
• ServiceCardTitle will be truncated to two lines using CSS

With icon

<div style={{ maxWidth: '300px' }}>
    <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
        <ServiceCardImage
            alt="Sprinkler and Irrigation System Repair and Maintenance"
            url="https://d1vg1gqh4nkuns.cloudfront.net/i/318810408927723609/small/standard/hero"
        />
        <ServiceCardTitle>Sprinkler and Irrigation System Repair and Maintenance</ServiceCardTitle>
        <ServiceCardDescription icon={<ContentModifierMapPinSmall />}>
            67 Pros near you
        </ServiceCardDescription>
    </ServiceCard>
</div>

Without icon

<div style={{ maxWidth: '300px' }}>
    <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
        <ServiceCardImage
            alt="Sprinkler and Irrigation System Repair and Maintenance"
            url="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>