設計
設計の土台をひとつに決める
田中 美咲 / 5分で読めます
見出し画像
設計の土台をひとつに決めておくと、画面が増えても言葉と部品がぶれません。 この記事では、決め方と、決めたあとに何を機械で守るかを書きます。
BlogTemplateExperimental
Blog post layout with category, title, byline, hero image, and prose.
プレビュー
状態とバリエーション
title だけが必須で、category・meta・hero は省略できます。省いた分だけ本文が上に詰まるので、記事の重さに合わせて足し引きします。
hero つき
全部の口を埋めた形です。hero には画像でも動画でも、任意のノードを置けます。
hero 無し
hero を省くと、見出しのすぐ下から本文が始まります。図が要らない短い記事はこちらです。
設計
設計の土台をひとつに決める
田中 美咲 / 5分で読めます
設計の土台をひとつに決めておくと、画面が増えても言葉と部品がぶれません。 この記事では、決め方と、決めたあとに何を機械で守るかを書きます。
title だけ
category と meta も省いた最小の形です。お知らせや規約のように、書き手や分類を出さない文書に使います。
利用規約の改定について
設計の土台をひとつに決めておくと、画面が増えても言葉と部品がぶれません。 この記事では、決め方と、決めたあとに何を機械で守るかを書きます。
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| category | ReactNode | - | Category label above the title (e.g. 'Engineering'). |
| title | ReactNode | - | Article title (h1). |
| meta | ReactNode | - | Author / read time / date row. |
| hero | ReactNode | - | Optional hero media block (image, video). |
| children | ReactNode | - | Article body. Wrapped in `prose` for typography styling. |
Usage
import { BlogTemplate } from "@gunjo/ui"
<BlogTemplate title="..." meta="...">{children}</BlogTemplate>