0.2.10 • Published 5 years ago
@thumbtack/tp-ui-react-service-card v0.2.10
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>