SectionContent wrapper with multiple visual variants.

Section ($type="default")

Lorem ipsum dolor sit amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

import Section from '@/components/Section';import { H2, P } from '@/components/Typography';
export function Example() {  return (    <Section>      <H2>Lorem ipsum dolor sit amet</H2>      <P>        Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.      </P>    </Section>  );}

Section ($type="blueprint")

Blueprint Header

Section can visually continue the blueprint frame

Blueprint Section A

This section continues directly after a blueprint header.

Blueprint Section B

Adjacent blueprint sections merge their top border and hide top dots.

import Header from '@/components/Header';import Section from '@/components/Section';import { H1, H2, P, SubTitle } from '@/components/Typography';
export function Example() {  return (    <>      <Header $type="blueprint">        <H1>Blueprint Header</H1>        <SubTitle>Section can visually continue the blueprint frame</SubTitle>      </Header>      <Section $type="blueprint">        <H2>Blueprint Section A</H2>        <P>This section continues directly after a blueprint header.</P>      </Section>      <Section $type="blueprint">        <H2>Blueprint Section B</H2>        <P>Adjacent blueprint sections merge their top border and hide top dots.</P>      </Section>    </>  );}

Section ($type="secondary")

Secondary Section

Use this variant for soft-emphasis areas.

import Section from '@/components/Section';import { H2, P } from '@/components/Typography';
export function Example() {  return (    <Section $type="secondary">      <H2>Secondary Section</H2>      <P>Use this variant for soft-emphasis areas.</P>    </Section>  );}

Section ($type="dark")

Dark Section

Use this variant for strong contrast blocks.

import Section from '@/components/Section';import { H2, P } from '@/components/Typography';
export function Example() {  return (    <Section $type="dark">      <H2>Dark Section</H2>      <P>Use this variant for strong contrast blocks.</P>    </Section>  );}