ArticleListCard

Shared article/news list card: [square thumb | badge · title · 作成-date] on the first row, with the excerpt + tags on a full-width row below.

Lists & Cards

Default

Without badge

With updated date

Guide alignment

As h3

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ArticleListCard — 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 ArticleListCard from './article-list-card'; import type { CuratedTag } from '@/src/lib/home/curated-tags'; const meta: StoryMeta = { title: 'ArticleListCard', category: 'Lists & Cards', description: 'Shared article/news list card: [square thumb | badge · title · 作成-date] on the first row, with the excerpt + tags on a full-width row below.', usage: `import ArticleListCard from '@/components/shared/article-list-card';\n\n<ArticleListCard href="/notes/foo/" thumb={thumb} title="..." createdDate="2026/06/21" excerpt="..." tags={tags} />`, }; export default meta; const sampleThumb = <div class="aspect-square overflow-hidden border border-zd-white bg-zd-gray" />; const sampleTags = ( <ul class="flex flex-wrap gap-vgap-2xs text-xs"> {['#発表／告知', '#ADDAC System', '#Modular Synthesizer'].map((t) => ( <li key={t} class="inline-flex whitespace-nowrap"> {t} </li> ))} </ul> ); const newsTag: CuratedTag = { key: 'news', label: 'お知らせ', labelEn: 'News' }; const guideTag: CuratedTag = { key: 'guide', label: 'ガイド', labelEn: 'Guide' }; export const Default = defineStory({ name: 'Default', render: () => ( <ArticleListCard href="#" thumb={sampleThumb} curatedTag={newsTag} title="Notes009: ADDAC System: ADDAC120s Four Strings シリーズ発表！" createdDate="2026/06/21" excerpt="ADDAC Systemより発表された、フィジカルな弦をEurorackに持ち込むモジュール群「ADDAC120s Four Strings」シリーズの紹介です。" tags={sampleTags} /> ), }); export const WithoutBadge = defineStory({ name: 'Without badge', render: () => ( <ArticleListCard href="#" thumb={sampleThumb} title="Notes008: SHIK S32 発表！" createdDate="2026/06/05" excerpt="SHIKより発表されたスタンドアロンMIDIプロセッサー／マクロコントローラーS32の紹介テキストの日本語訳です。" tags={sampleTags} /> ), }); export const WithUpdatedDate = defineStory({ name: 'With updated date', render: () => ( <ArticleListCard href="#" thumb={sampleThumb} curatedTag={guideTag} title="MetaModuleガイド EP.1: Richard Devineが語るモジュラーとの歩みとMetaModule" createdDate="2026/06/25" updatedDate="2026/06/28" excerpt="4ms公式ポッドキャスト第1回のゲストは、アトランタ拠点のエレクトロニックアーティスト、リチャード・ディヴァイン。" tags={sampleTags} /> ), }); export const GuideAlignment = defineStory({ name: 'Guide alignment', render: () => ( <ArticleListCard href="#" thumb={sampleThumb} curatedTag={guideTag} title="OXI ONE MKII 解説 EP.1: 全体像を把握する" createdDate="2026/03/05" excerpt="OXI ONE MKIIの解説シリーズです。EP.1では、OXI ONE MKIIの全体像と基本的な操作フローを解説します。" tags={sampleTags} thumbAlign="start" contentAlign="center" /> ), }); export const AsH3 = defineStory({ name: 'As h3', render: () => ( <ArticleListCard href="#" thumb={sampleThumb} curatedTag={newsTag} title="Notes007: OAM Time Machine ファームウェアアップグレード手順" createdDate="2026/05/10" excerpt="OAM Time MachineのファームウェアをV1.1.1にアップデートする手順をまとめました。" tags={sampleTags} as="h3" /> ), });