カード
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 個のフレームワーク初級
Loading…
An article card with a cover image, category chip, excerpt and author byline.
<article class="blog-card">
<img class="blog-card__cover" src="/your-image.jpg" alt="" width="384" height="200" />
<div class="blog-card__body">
<p class="blog-card__chip">Engineering</p>
<h3 class="blog-card__title">
<a class="blog-card__link" href="#">Why we rewrote our design tokens in one afternoon</a>
</h3>
<p class="blog-card__excerpt">
Four years of drift left us with 312 colours for what turned out to be nine decisions. Here is how we found them.
</p>
<div class="blog-card__meta">
<img class="blog-card__avatar" src="/your-image.jpg" alt="" width="28" height="28" />
<span class="blog-card__author">Priya Raman</span>
<span class="blog-card__dot" aria-hidden="true">·</span>
<time class="blog-card__date" datetime="2026-06-18">18 Jun 2026</time>
</div>
</div>
</article>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title必須 | string | - | カードの見出しテキスト。 |
href必須 | string | - | カードのリンク先。 |
excerpt必須 | string | - | タイトルの下に表示される短い要約。 |
category必須 | string | - | タイトルの上に表示されるカテゴリのラベル。 |
coverSrc必須 | string | - | カバー画像の URL。 |
authorName必須 | string | - | 投稿の著者名。 |
authorAvatarSrc必須 | string | - | 著者アバターの画像 URL。 |
date必須 | string | - | 機械可読な公開日。 |
dateLabel必須 | string | - | 人が読める形式の公開日。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The title link stretches over the card with `after:absolute after:inset-0`, so the whole surface is clickable from a single real anchor - no nested links, and the announced name is the headline rather than "Read more". That trick needs a positioned ancestor: keep `relative` on the article. The `<time datetime>` is what feeds structured data, so give it the machine format and let the visible label be whatever reads well.