PersonIntroBlock

Surface-panel introduction block for a person (artist, designer, collaborator) in MDX articles. Eyebrow, name, muted meta line with hairline divider, article-rhythm prose body, external links, and an optional portrait photo — right column on desktop, centered above the text on mobile. Looks complete without a photo.

Article Blocks

With photo

No photo

English / no photo

// Story for PersonIntroBlock — intro-block surface panel (epic #1836, #1837). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { PersonIntroBlock } from './person-intro-block'; const meta: StoryMeta = { title: 'PersonIntroBlock', category: 'Article Blocks', description: 'Surface-panel introduction block for a person (artist, designer, collaborator) in MDX articles. Eyebrow, name, muted meta line with hairline divider, article-rhythm prose body, external links, and an optional portrait photo — right column on desktop, centered above the text on mobile. Looks complete without a photo.', usage: `import { PersonIntroBlock } from '@/components/mdx/person-intro-block';\n\n<PersonIntroBlock\n name="Richard Devine"\n meta="リチャード・ディヴァイン — Electronic Music Artist / Sound Designer, Atlanta USA"\n photoSlug="some-image-slug"\n links={[{ label: 'richarddevine.bandcamp.com', href: 'https://richarddevine.bandcamp.com/' }]}\n>\n 紹介文…\n</PersonIntroBlock>`, }; export default meta; /** With portrait photo — right column on md+, above the text on mobile */ export const WithPhoto = defineStory({ name: 'With photo', render: () => ( <PersonIntroBlock name="Richard Devine" meta="リチャード・ディヴァイン — Electronic Music Artist / Sound Designer, Atlanta USA" photoSlug="saucer" links={[ { label: 'richarddevine.bandcamp.com', href: 'https://richarddevine.bandcamp.com/' }, { label: 'instagram.com/richarddevine', href: 'https://www.instagram.com/richarddevine/' }, ]} > アトランタを拠点に活動するエレクトロニック・ミュージック・アーティスト／サウンドデザイナー。実験的な電子音楽シーンを代表する存在であり、モジュラーシンセサイザーを駆使した緻密で立体的なサウンドデザインで知られています。 Warp Records や Schematic からのリリースに加え、ゲームや自動車メーカーへのサウンドデザイン提供など、活動は多岐にわたります。 </PersonIntroBlock> ), }); /** Without photo — single-column full-width panel, no empty media gap */ export const NoPhoto = defineStory({ name: 'No photo', render: () => ( <PersonIntroBlock name="Richard Devine" meta="リチャード・ディヴァイン — Electronic Music Artist / Sound Designer, Atlanta USA" links={[{ label: 'richarddevine.bandcamp.com', href: 'https://richarddevine.bandcamp.com/' }]} > アトランタを拠点に活動するエレクトロニック・ミュージック・アーティスト／サウンドデザイナー。実験的な電子音楽シーンを代表する存在であり、モジュラーシンセサイザーを駆使した緻密で立体的なサウンドデザインで知られています。 </PersonIntroBlock> ), }); /** English body content, custom eyebrow, no photo */ export const EnglishNoPhoto = defineStory({ name: 'English / no photo', render: () => ( <PersonIntroBlock name="Richard Devine" meta="Electronic Music Artist / Sound Designer, Atlanta USA" eyebrow="About the Sound Designer" links={[{ label: 'richarddevine.bandcamp.com', href: 'https://richarddevine.bandcamp.com/' }]} > Atlanta-based electronic music artist and sound designer, known for intricate, three-dimensional sound design built around modular synthesizers. Beyond releases on Warp Records and Schematic, his work spans sound design for games and automotive manufacturers. </PersonIntroBlock> ), });