Skip to content

← All components

Foundation and layout

Section

Vertical page section with consistent spacing.

Live example

Foundation

A clear section

Semantic page rhythm.

Section content follows its optional header.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Section } from "@cofob/design-system-react";

/**
 * Complete Section parameter reference.
 * @param spacing/surface
 *   type: Size and "canvas" | "subtle" | "accent" (React)
 *   default: "lg" / "canvas" (React)
 *   example: spacing="lg" surface="subtle"
 * @param eyebrow/title/description
 *   type: string (Svelte section header)
 *   default: —
 *   example: eyebrow="Guide" title="Install" description="Start here"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param section attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function SectionExample() {
  return (
    <Section>Content</Section>
  );
}

Svelte

svelte
<script lang="ts">
  import { Section } from "@cofob/design-system-svelte";

  // Complete Section parameter reference.
  // spacing/surface
  //   type: Size and "canvas" | "subtle" | "accent" (React)
  //   default: "lg" / "canvas" (React)
  //   example: spacing="lg" surface="subtle"
  // eyebrow/title/description
  //   type: string (Svelte section header)
  //   default: —
  //   example: eyebrow="Guide" title="Install" description="Start here"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // section attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Section>Content</Section>

HTML

html
<!--
  Complete Section parameter reference.
  spacing/surface
    type: Size and "canvas" | "subtle" | "accent" (React)
    default: "lg" / "canvas" (React)
    example: spacing="lg" surface="subtle"
  eyebrow/title/description
    type: string (Svelte section header)
    default: —
    example: eyebrow="Guide" title="Install" description="Start here"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  section attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<section class="cf-section">…</section>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
spacing/surfaceSize and "canvas" | "subtle" | "accent" (React)"lg" / "canvas" (React)React · Svelte · HTMLspacing="lg" surface="subtle"React section spacing and semantic surface treatment.
eyebrow/title/descriptionstring (Svelte section header)—React · Svelte · HTMLeyebrow="Guide" title="Install" description="Start here"Svelte convenience content for the section heading block.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.
section attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.