About Section

Section describing the business or people behind it.

html

<section class="about about--image-left">
  <div class="about__visual" style="background:linear-gradient(135deg, #A8E6C1, #FAF7F2);" role="img" aria-label="Photo of the team"></div>
  <div class="about__content">
    <h2 class="about__heading">The people behind the studio</h2>
    <p class="about__body">We&#39;re a small team who&#39;ve spent a decade building products for people who don&#39;t usually get asked what they need.</p>
    
    <dl class="about__stats">
      <div><dt style="color:#A8E6C1;">12</dt><dd>Years</dd></div>
      <div><dt style="color:#A8E6C1;">340+</dt><dd>Projects</dd></div>
    </dl>
    
  </div>
</section>
<style>
.about { display: flex; gap: 32px; align-items: center; font: 16px/1.6 system-ui, sans-serif; color: #241430; padding: 40px 24px; background: #FAF7F2; }
.about--image-left { flex-direction: row; }
.about--image-right { flex-direction: row-reverse; }
.about--centered { flex-direction: column; text-align: center; }
.about--centered .about__stats { justify-content: center; }
.about__visual { flex: 1 1 240px; min-height: 180px; border-radius: 12px; }
.about__content { flex: 1 1 320px; }
.about__heading { margin: 0 0 12px; font-size: 26px; font-weight: 700; }
.about__body { margin: 0 0 16px; color: #241430cc; }
.about__stats { display: flex; gap: 24px; margin: 0; }
.about__stats dt { font-size: 22px; font-weight: 700; }
.about__stats dd { margin: 0; font-size: 13px; color: #241430aa; }
</style>

tailwind

<section class="about-tw about-tw--image-left flex gap-8 items-center font-sans text-[#241430] p-10 bg-[#FAF7F2]">
  <div class="flex-1 min-w-[240px] min-h-[180px] rounded-xl" style="background:linear-gradient(135deg, #A8E6C1, #FAF7F2);" role="img" aria-label="Photo of the team"></div>
  <div class="flex-1 min-w-[320px]">
    <h2 class="m-0 mb-3 text-2xl font-bold">The people behind the studio</h2>
    <p class="m-0 mb-4 text-[#241430]/80">We&#39;re a small team who&#39;ve spent a decade building products for people who don&#39;t usually get asked what they need.</p>
    
    <dl class="flex gap-6 m-0">
      <div><dt class="text-xl font-bold" style="color:#A8E6C1;">12</dt><dd class="m-0 text-xs text-[#241430]/70">Years</dd></div>
      <div><dt class="text-xl font-bold" style="color:#A8E6C1;">340+</dt><dd class="m-0 text-xs text-[#241430]/70">Projects</dd></div>
    </dl>
    
  </div>
</section>
<style>
.about-tw--image-left { flex-direction: row; }
.about-tw--image-right { flex-direction: row-reverse; }
.about-tw--centered { flex-direction: column; text-align: center; }
.about-tw--centered dl { justify-content: center; }
</style>

react

export function AboutSection({
  heading = "The people behind the studio",
  body = "We're a small team who've spent a decade building products for people who don't usually get asked what they need.",
  layout = "image-left",
  accent = "#A8E6C1",
  showStats = true,
}) {
  const wrap = {
    "image-left": { flexDirection: "row" },
    "image-right": { flexDirection: "row-reverse" },
    centered: { flexDirection: "column", textAlign: "center" },
  }[layout] ?? {};
  return (
    <section style={{ display: "flex", gap: 32, alignItems: "center", font: "16px/1.6 system-ui, sans-serif",
      color: "#241430", padding: "40px 24px", background: "#FAF7F2", ...wrap }}>
      <div style={{ flex: "1 1 240px", minHeight: 180, borderRadius: 12,
        background: `linear-gradient(135deg, ${accent}, #FAF7F2)` }} role="img" aria-label="Photo of the team" />
      <div style={{ flex: "1 1 320px" }}>
        <h2 style={{ margin: "0 0 12px", fontSize: 26, fontWeight: 700 }}>{heading}</h2>
        <p style={{ margin: "0 0 16px", color: "#241430cc" }}>{body}</p>
        {showStats && (
          <dl style={{ display: "flex", gap: 24, margin: 0, justifyContent: layout === "centered" ? "center" : "flex-start" }}>
            <div><dt style={{ fontSize: 22, fontWeight: 700, color: accent }}>12</dt><dd style={{ margin: 0, fontSize: 13, color: "#241430aa" }}>Years</dd></div>
            <div><dt style={{ fontSize: 22, fontWeight: 700, color: accent }}>340+</dt><dd style={{ margin: 0, fontSize: 13, color: "#241430aa" }}>Projects</dd></div>
          </dl>
        )}
      </div>
    </section>
  );
}