Feature Card

Individual feature summary block.

html

<div class="feature-card">
  <span class="feature-card__badge feature-card__badge--circle" style="background:#A8E6C1;" aria-hidden="true">⚡</span>
  <h3 class="feature-card__title">Instant sync</h3>
  <p class="feature-card__desc">Changes appear everywhere within milliseconds, no refresh needed.</p>
</div>
<style>
.feature-card { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 260px; padding: 8px; }
.feature-card__badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 20px; margin-bottom: 14px; }
.feature-card__badge--circle { border-radius: 50%; }
.feature-card__badge--square { border-radius: 8px; }
.feature-card__badge--hex { border-radius: 22% 22% 40% 40% / 30% 30% 30% 30%; }
.feature-card__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.feature-card__desc { margin: 0; font-size: 14px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] max-w-[260px] p-2">
  <span class="feature-card-tw__badge feature-card-tw__badge--circle inline-flex items-center justify-center w-11 h-11 text-xl mb-3.5" style="background:#A8E6C1;" aria-hidden="true">⚡</span>
  <h3 class="m-0 mb-1.5 text-[17px] font-bold">Instant sync</h3>
  <p class="m-0 text-sm text-[#241430]/80">Changes appear everywhere within milliseconds, no refresh needed.</p>
</div>
<style>
.feature-card-tw__badge--circle { border-radius: 50%; }
.feature-card-tw__badge--square { border-radius: 8px; }
.feature-card-tw__badge--hex { border-radius: 22% 22% 40% 40% / 30% 30% 30% 30%; }
</style>

react

export function FeatureCard({
  icon = "⚡",
  title = "Instant sync",
  description = "Changes appear everywhere within milliseconds, no refresh needed.",
  badgeShape = "circle",
  accent = "#A8E6C1",
}) {
  const radius = { circle: "50%", square: "8px", hex: "22% 22% 40% 40% / 30% 30% 30% 30%" }[badgeShape] ?? "50%";
  return (
    <div style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", maxWidth: 260, padding: 8 }}>
      <span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 44, height: 44, fontSize: 20, marginBottom: 14, background: accent, borderRadius: radius }}>{icon}</span>
      <h3 style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 700 }}>{title}</h3>
      <p style={{ margin: 0, fontSize: 14, color: "#241430cc" }}>{description}</p>
    </div>
  );
}