ブログ一覧で使う記事カード。サムネイル・タグ・タイトル・抜粋・日付の定番構成を、aspect-ratioとoverflowで崩れないように組みます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
サムネイル領域に aspect-ratio: 16 / 9 を指定しておくと、画像の読み込み前後で高さが変わらず、一覧のガタつき（レイアウトシフト）を防げます。カード全体の overflow: hidden は、角丸の内側に画像を収めるためです。本文は flex-direction: column と gap で縦に積み、要素間の余白をmarginではなくgapで一元管理しています。
実際の画像を使う場合は img に width/height 属性か object-fit: cover を指定します。抜粋の行数制限には line-clamp が使えます。
ブログ一覧用の記事カードを作ってください。サムネイル（aspect-ratio: 16/9）・タグの列・タイトル・抜粋・日付の構成で、画像読み込み時にレイアウトシフトが起きない作りにしてください。