Section

Distinct logical area within a page.

html

<div class="uif-sec-stage" data-highlight="hero">
  <div class="uif-sec-region uif-sec-region--nav">Nav</div>
  <div class="uif-sec-region uif-sec-region--hero">Hero</div>
  <div class="uif-sec-region uif-sec-region--content">Content</div>
  <div class="uif-sec-region uif-sec-region--footer">Footer</div>
  <p class="uif-sec-caption">A page is made of distinct sections &mdash; hero outlined</p>
</div>
<style>
.uif-sec-stage { width: 100%; max-width: 320px; padding: 12px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430; }
.uif-sec-region { padding: 12px; margin-bottom: 6px; background: #fff; border: 2px solid transparent; border-radius: 8px; text-align: center; }
[data-highlight="nav"] .uif-sec-region--nav,
[data-highlight="hero"] .uif-sec-region--hero,
[data-highlight="content"] .uif-sec-region--content,
[data-highlight="footer"] .uif-sec-region--footer { border-color: #E8A020; background: #24143008; }
.uif-sec-caption { margin: 8px 0 0; font-size: 11px; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[320px] p-3 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]" data-highlight="hero">
  <div class="tw-sec-nav p-3 mb-1.5 bg-white border-2 border-transparent rounded-lg text-center">Nav</div>
  <div class="tw-sec-hero p-3 mb-1.5 bg-white border-2 border-transparent rounded-lg text-center">Hero</div>
  <div class="tw-sec-content p-3 mb-1.5 bg-white border-2 border-transparent rounded-lg text-center">Content</div>
  <div class="tw-sec-footer p-3 mb-1.5 bg-white border-2 border-transparent rounded-lg text-center">Footer</div>
  <p class="mt-2 text-[11px] text-[#241430]/70">A page is made of distinct sections &mdash; hero outlined</p>
</div>
<style>
[data-highlight="nav"] .tw-sec-nav,
[data-highlight="hero"] .tw-sec-hero,
[data-highlight="content"] .tw-sec-content,
[data-highlight="footer"] .tw-sec-footer { border-color: #E8A020; background: #24143008; }
</style>

react

export function Section({
  highlighted = "hero",
  accent = "#E8A020",
}) {
  const box = (key) => ({ padding: 12, marginBottom: 6, background: highlighted === key ? "#24143008" : "#fff", border: `2px solid ${highlighted === key ? accent : "transparent"}`, borderRadius: 8, textAlign: "center" });
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 12, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430" }}>
      <div style={box("nav")}>Nav</div>
      <div style={box("hero")}>Hero</div>
      <div style={box("content")}>Content</div>
      <div style={box("footer")}>Footer</div>
      <p style={{ margin: "8px 0 0", fontSize: 11, color: "#241430aa" }}>A page is made of distinct sections &mdash; {highlighted} outlined</p>
    </div>
  );
}