卡片
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.