ContactThumb

Stylized contact-page thumbnail: a centered mail icon with diagonal line decorations matching NewsThumb.

Media & Icons

Default

Small

Large

Size comparison

/** @jsxRuntime automatic */ /** @jsxImportSource @takazudo/zfb/zudo-react */ // Story for ContactThumb — migrated to the repo-root story contract // (`lib/styleguide/story-contract`) as part of styleguide-rebuild batch A // (epic #1647, #1652). See action-button.stories.tsx for the migration recipe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ContactThumb from './contact-thumb'; const meta: StoryMeta = { title: 'ContactThumb', category: 'Media & Icons', description: 'Stylized contact-page thumbnail: a centered mail icon with diagonal line decorations matching NewsThumb.', usage: `import ContactThumb from '@/components/shared/contact-thumb';\n\n<div className="w-[200px]"><ContactThumb /></div>`, }; export default meta; export const Default = defineStory({ name: 'Default', render: () => ( <div class="w-[200px]"> <ContactThumb /> </div> ), }); export const Small = defineStory({ name: 'Small', render: () => ( <div class="w-[100px]"> <ContactThumb /> </div> ), }); export const Large = defineStory({ name: 'Large', render: () => ( <div class="w-[300px]"> <ContactThumb /> </div> ), }); export const SizeComparison = defineStory({ name: 'Size comparison', render: () => ( <div class="flex items-end gap-hgap-md"> <div class="w-[100px]"> <p class="text-muted text-xs mb-vgap-xs text-center">Small</p> <ContactThumb /> </div> <div class="w-[200px]"> <p class="text-muted text-xs mb-vgap-xs text-center">Medium</p> <ContactThumb /> </div> <div class="w-[300px]"> <p class="text-muted text-xs mb-vgap-xs text-center">Large</p> <ContactThumb /> </div> </div> ), });