Import
import { Stamp } from '@adoptaunabuelo/react-components';
Usage
import { ColorV2 } from '@adoptaunabuelo/react-components';
<Stamp
icon="🎉"
title="Celebration"
backgroundColor={ColorV2.surface.greenSoft}
/>
Props
Emoji or single character to display (rendered large)
Text label below the icon (truncates with ellipsis if too long)
Background color for the icon area
Custom styles for the stamp container
Features
- Authentic postage stamp appearance with perforated SVG edges
- Responsive sizing: 108x132px (desktop), 96x120px (mobile breakpoint less than 450px)
- Icon container: 96x96px (desktop), 84x84px (mobile)
- Title font: DM Mono at 13px, truncates with ellipsis
- Drop shadow for realistic depth effect
- White stamp background with customizable icon background color
Examples
Basic Stamp
import { ColorV2 } from '@adoptaunabuelo/react-components';
<Stamp
icon="❤️"
title="Love"
backgroundColor={ColorV2.surface.redSoft}
/>
Multiple Stamps
import { ColorV2 } from '@adoptaunabuelo/react-components';
<div style={{ display: 'flex', gap: '16px' }}>
<Stamp
icon="🎂"
title="Birthday"
backgroundColor={ColorV2.surface.primarySoft}
/>
<Stamp
icon="🎓"
title="Graduation"
backgroundColor={ColorV2.surface.secondarySoft}
/>
<Stamp
icon="🎄"
title="Christmas"
backgroundColor={ColorV2.surface.greenSoft}
/>
</div>
Custom Styling
import { ColorV2 } from '@adoptaunabuelo/react-components';
<Stamp
icon="⭐"
title="Featured"
backgroundColor={ColorV2.surface.secondary}
style={{ transform: 'rotate(-5deg)' }}
/>
