Skip to content

Section

⚠️ This documentation file needs to be reviewed ⚠️, but the component is ready to use.

Section component defines the vertical layout structure by stacking content into clearly separated page sections.

Basic Usage

To implement the Section component, you need to import it first:

import { Section } from 'rades_react';

And use it:

<>
  <Section>
    <docoff-placeholder bordered>
      Section one
    </docoff-placeholder>
  </Section>
  <Section>
    <docoff-placeholder bordered>
      Section two
    </docoff-placeholder>
  </Section>
  <Section>
    <docoff-placeholder bordered>
      Section three
    </docoff-placeholder>
  </Section>
</>

See API for all available options.

Separator

Defines the visual border used to clearly separate sections on the page. This helps improve readability and structure by giving each section a clear beginning and end.

<>
  <Section>
    <docoff-placeholder bordered>
      Section on
    </docoff-placeholder>
  </Section>
  <Section separator={"both"}>
    <docoff-placeholder bordered>
      Section two
    </docoff-placeholder>
  </Section>
  <Section>
    <docoff-placeholder bordered>
      Section three
    </docoff-placeholder>
  </Section>
</>

API