見出し＋本文＋ボタンの1枚カード

カード ／ パターン集トップ

10分課題の最短形。h3・本文・Primaryボタン1枚。starterトークンでそのまま使える

プレビュー#

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<article class="card-cta" aria-labelledby="card-cta-title">
  <h3 id="card-cta-title">相談のご予約</h3>
  <p>初回30分は無料です。オンラインまたは対面から選べます。</p>
  <button type="button" class="button button--primary">予約する</button>
</article>

.card-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: 24rem;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);   /* 案件を通してこの1つ。中のボタンと同じ角になる */
}
.card-cta h3 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-heading, 1.35);
  color: var(--color-text);
}
.card-cta p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body, 1.75);
  color: var(--color-text-muted);
}
/* .button の基底と派生は「出発点のCSS」にある */
.card-cta .button {
  align-self: flex-start;
  margin-block-start: var(--space-2);
}

確認する#

• カードの角とボタンの角が、同じ --radius でそろっている
• 見出し・本文・ボタンの間隔が --space-3 / --space-2 で一定
• Primary ボタンが1枚だけ（同カード内に2つ目の強調がない）
• 375px 幅でカードが横あふれしない

関連#

• 余白
• 大きさの体系
• ボタンとリンク
• 出発点のCSS