Benefits Section

Section framing features in terms of user outcomes.

html

<section class="benefits">
  <h2 class="benefits__heading">What you get</h2>
  <ul class="benefits__list benefits__list--list">
    <li><span class="benefits__check" style="color:#A8E6C1;" aria-hidden="true">&#10003;</span>Spend less time on setup, more on the actual work</li>
    <li><span class="benefits__check" style="color:#A8E6C1;" aria-hidden="true">&#10003;</span>Know exactly where every project stands, always</li>
  </ul>
</section>
<style>
.benefits { font: 16px/1.5 system-ui, sans-serif; color: #241430; padding: 24px; }
.benefits__heading { margin: 0 0 16px; font-size: 22px; font-weight: 700; }
.benefits__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.benefits__list--list { flex-direction: column; }
.benefits__list--grid { flex-direction: row; flex-wrap: wrap; }
.benefits__list--grid li { flex: 1 1 200px; }
.benefits__list li { display: flex; gap: 8px; align-items: flex-start; }
.benefits__check { font-weight: 700; flex-shrink: 0; }
</style>

tailwind

<section class="font-sans text-[#241430] p-6">
  <h2 class="m-0 mb-4 text-xl font-bold">What you get</h2>
  <ul class="benefits-tw benefits-tw--list list-none m-0 p-0 flex gap-3">
    <li class="flex gap-2 items-start"><span class="font-bold flex-shrink-0" style="color:#A8E6C1;" aria-hidden="true">&#10003;</span>Spend less time on setup, more on the actual work</li>
    <li class="flex gap-2 items-start"><span class="font-bold flex-shrink-0" style="color:#A8E6C1;" aria-hidden="true">&#10003;</span>Know exactly where every project stands, always</li>
  </ul>
</section>
<style>
.benefits-tw--list { flex-direction: column; }
.benefits-tw--grid { flex-direction: row; flex-wrap: wrap; }
.benefits-tw--grid li { flex: 1 1 200px; }
</style>

react

export function BenefitsSection({
  heading = "What you get",
  outcome1 = "Spend less time on setup, more on the actual work",
  outcome2 = "Know exactly where every project stands, always",
  layout = "list",
  accent = "#A8E6C1",
}) {
  const listStyle = layout === "grid"
    ? { flexDirection: "row", flexWrap: "wrap" }
    : { flexDirection: "column" };
  const itemStyle = { display: "flex", gap: 8, alignItems: "flex-start", flex: layout === "grid" ? "1 1 200px" : "auto" };
  return (
    <section style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", padding: 24 }}>
      <h2 style={{ margin: "0 0 16px", fontSize: 22, fontWeight: 700 }}>{heading}</h2>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", gap: 12, ...listStyle }}>
        <li style={itemStyle}><span aria-hidden="true" style={{ fontWeight: 700, flexShrink: 0, color: accent }}>&#10003;</span>{outcome1}</li>
        <li style={itemStyle}><span aria-hidden="true" style={{ fontWeight: 700, flexShrink: 0, color: accent }}>&#10003;</span>{outcome2}</li>
      </ul>
    </section>
  );
}