Hero

Prominent introductory section.

html

<section class="hero-demo hero-demo--center" style="background:linear-gradient(135deg, #F5C2E0, #FAF7F2);">
  <h1 class="hero-demo__heading">Build interfaces faster</h1>
  <p class="hero-demo__sub">A living glossary of layout patterns, ready to copy into your project.</p>
  <button class="hero-demo__cta" type="button">Get started</button>
</section>
<style>
.hero-demo { font: 14px system-ui, sans-serif; color: #241430; padding: 36px 24px; display: flex; flex-direction: column; }
.hero-demo--center { align-items: center; text-align: center; }
.hero-demo--left { align-items: flex-start; text-align: left; }
.hero-demo__heading { margin: 0 0 10px; font-size: 26px; font-weight: 700; max-width: 26ch; }
.hero-demo__sub { margin: 0 0 18px; max-width: 42ch; color: #241430cc; }
.hero-demo__cta { background: #241430; color: #FAF7F2; border: none; padding: 10px 20px; border-radius: 999px; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.hero-demo__cta:hover { opacity: .88; }
.hero-demo__cta:focus-visible { outline: 2px solid #241430; outline-offset: 3px; }
</style>

tailwind

<section class="font-sans text-sm text-[#241430] px-6 py-9 flex flex-col hero-tw hero-tw--center" style="background:linear-gradient(135deg, #F5C2E0, #FAF7F2);">
  <h1 class="m-0 mb-2.5 text-2xl font-bold max-w-[26ch]">Build interfaces faster</h1>
  <p class="m-0 mb-4 max-w-[42ch] text-[#241430]/80">A living glossary of layout patterns, ready to copy into your project.</p>
  <button type="button" class="bg-[#241430] text-[#FAF7F2] border-none px-5 py-2.5 rounded-full font-semibold text-sm cursor-pointer hover:opacity-90 focus-visible:outline focus-visible:outline-2">Get started</button>
</section>
<style>
.hero-tw--center { align-items: center; text-align: center; }
.hero-tw--left { align-items: flex-start; text-align: left; }
</style>

react

export function Hero({
  heading = "Build interfaces faster",
  subheading = "A living glossary of layout patterns, ready to copy into your project.",
  align = "center",
  accent = "#F5C2E0",
  cta = true,
}) {
  const centered = align === "center";
  return (
    <section style={{
      fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", padding: "36px 24px",
      display: "flex", flexDirection: "column", alignItems: centered ? "center" : "flex-start",
      textAlign: centered ? "center" : "left", background: `linear-gradient(135deg, ${accent}, #FAF7F2)`,
    }}>
      <h1 style={{ margin: "0 0 10px", fontSize: 26, fontWeight: 700, maxWidth: "26ch" }}>{heading}</h1>
      <p style={{ margin: "0 0 18px", maxWidth: "42ch", color: "#241430cc" }}>{subheading}</p>
      {cta && (
        <button type="button" style={{ background: "#241430", color: "#FAF7F2", border: "none", padding: "10px 20px", borderRadius: 999, fontWeight: 600, fontSize: 14, cursor: "pointer" }}>
          Get started
        </button>
      )}
    </section>
  );
}