section

Thematic section of content.

<section>

Pricing

A thematic grouping of content, typically with its own heading.

<section>

Another theme

Each section is its own self-contained thematic block, stacking in document order.

html

<div class="sec-demo">
  <section class="sec-el sec-el--divider" style="--accent:#D9C8F0;">
    <p class="sec-el__tag">&lt;section&gt;</p>
    <h2 class="sec-el__heading">Pricing</h2>
    <p class="sec-el__body">A thematic grouping of content, typically with its own heading.</p>
  </section>
  <section class="sec-el sec-el--divider" style="--accent:#D9C8F0;">
    <p class="sec-el__tag">&lt;section&gt;</p>
    <h2 class="sec-el__heading">Another theme</h2>
    <p class="sec-el__body">Each section is its own self-contained thematic block, stacking in document order.</p>
  </section>
</div>
<style>
.sec-demo { width: 360px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 8px; border-radius: 12px; }
.sec-el { padding: 16px 14px; }
.sec-el--divider:not(:last-child) { border-bottom: 1.5px dashed var(--accent); }
.sec-el__tag { margin: 0 0 6px; font: 700 10px ui-monospace, monospace; color: var(--accent); text-transform: uppercase; }
.sec-el__heading { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.sec-el__body { margin: 0; color: #241430aa; font-size: 13px; }
</style>

tailwind

<div class="w-[360px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-2 rounded-xl">
  <section class="sec-tw sec-tw--divider px-3.5 py-4" style="--accent:#D9C8F0">
    <p class="m-0 mb-1.5 font-mono text-[10px] font-bold uppercase" style="color:#D9C8F0">&lt;section&gt;</p>
    <h2 class="m-0 mb-1.5 text-[17px] font-bold">Pricing</h2>
    <p class="m-0 text-[#241430]/65 text-[13px]">A thematic grouping of content, typically with its own heading.</p>
  </section>
  <section class="sec-tw sec-tw--divider px-3.5 py-4" style="--accent:#D9C8F0">
    <p class="m-0 mb-1.5 font-mono text-[10px] font-bold uppercase" style="color:#D9C8F0">&lt;section&gt;</p>
    <h2 class="m-0 mb-1.5 text-[17px] font-bold">Another theme</h2>
    <p class="m-0 text-[#241430]/65 text-[13px]">Each section is its own self-contained thematic block, stacking in document order.</p>
  </section>
</div>
<style>
.sec-tw--divider:not(:last-child) { border-bottom: 1.5px dashed var(--accent); }
</style>

react

export function SectionElement({
  heading = "Pricing",
  body = "A thematic grouping of content, typically with its own heading.",
  accent = "#D9C8F0",
  divider = true,
}) {
  const style = { padding: "16px 14px", borderBottom: divider ? `1.5px dashed ${accent}` : "none" };
  return (
    <div style={{ width: 360, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 8, borderRadius: 12 }}>
      <section style={style}>
        <p style={{ margin: "0 0 6px", font: "700 10px ui-monospace, monospace", color: accent, textTransform: "uppercase" }}>&lt;section&gt;</p>
        <h2 style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 700 }}>{heading}</h2>
        <p style={{ margin: 0, color: "#241430aa", fontSize: 13 }}>{body}</p>
      </section>
      <section style={{ padding: "16px 14px" }}>
        <p style={{ margin: "0 0 6px", font: "700 10px ui-monospace, monospace", color: accent, textTransform: "uppercase" }}>&lt;section&gt;</p>
        <h2 style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 700 }}>Another theme</h2>
        <p style={{ margin: 0, color: "#241430aa", fontSize: 13 }}>Each section is its own self-contained thematic block, stacking in document order.</p>
      </section>
    </div>
  );
}