VaneUI

VaneUI

Layout Components

Section

A semantic container used to group related content within a page. This component helps to create a clear document outline and improve accessibility.

Basic Section

A semantic container for grouping related content.

Section Title

This is content within a section container.

react-icon

BasicSection.tsx

<Section>
  <Text semibold>Section Title</Text>
  <Text>This is content within a section container.</Text>
</Section>

Section Sizes

Sections come in different sizes.

Section xs

Section xs content

Section sm

Section sm content

Section md

Section md content

Section lg

Section lg content

Section xl

Section xl content

react-icon

SectionSizes.tsx

<Col lg>
  <Section xs>
    <Text semibold>Section xs</Text>
    <Text>Section xs content</Text>
  </Section>
  <Section sm>
    <Text semibold>Section sm</Text>
    <Text>Section sm content</Text>
  </Section>
  <Section md>
    <Text semibold>Section md</Text>
    <Text>Section md content</Text>
  </Section>
  <Section lg>
    <Text semibold>Section lg</Text>
    <Text>Section lg content</Text>
  </Section>
  <Section xl>
    <Text semibold>Section xl</Text>
    <Text>Section xl content</Text>
  </Section>
</Col>

Section Appearances

Sections can have different background appearances.

Primary Section

Section with primary background

Secondary Section

Section with secondary background

Success Section

Section with success background

Danger Section

Section with danger background

react-icon

SectionAppearances.tsx

<Col lg>
  <Section primary>
    <Text semibold>Primary Section</Text>
    <Text>Section with primary background</Text>
  </Section>
  <Section secondary>
    <Text semibold>Secondary Section</Text>
    <Text>Section with secondary background</Text>
  </Section>
  <Section success>
    <Text semibold>Success Section</Text>
    <Text>Section with success background</Text>
  </Section>
  <Section danger>
    <Text semibold>Danger Section</Text>
    <Text>Section with danger background</Text>
  </Section>
</Col>

Section Flex Direction

Control the direction of section content.

Column Direction

Content flows vertically

Another line

Row Direction

Content flows horizontally

Another line

react-icon

SectionFlexDirection.tsx

<Col lg>
  <Section column>
    <Text semibold>Column Direction</Text>
    <Text>Content flows vertically</Text>
    <Text>Another line</Text>
  </Section>
  <Section row>
    <Text semibold>Row Direction</Text>
    <Text>Content flows horizontally</Text>
    <Text>Another line</Text>
  </Section>
</Col>

Section with Padding

Control section internal padding.

With Padding

Section with internal padding

No Padding

Section without internal padding

react-icon

SectionwithPadding.tsx

<Col lg>
  <Section className="border-2 border-dashed border-gray-300" padding>
    <Text semibold>With Padding</Text>
    <Text>Section with internal padding</Text>
  </Section>
  <Section className="border-2 border-dashed border-gray-300" noPadding>
    <div className="p-4 bg-gray-100">
      <Text semibold>No Padding</Text>
      <Text>Section without internal padding</Text>
    </div>
  </Section>
</Col>

Section with Gap

Control spacing between section content.

With Gap

Content with spacing

Another line

No Gap

Content without spacing

Another line

react-icon

SectionwithGap.tsx

<Col lg>
  <Section gap>
    <Text semibold>With Gap</Text>
    <Text>Content with spacing</Text>
    <Text>Another line</Text>
  </Section>
  <Section noGap>
    <Text semibold>No Gap</Text>
    <Text>Content without spacing</Text>
    <Text>Another line</Text>
  </Section>
</Col>

Section Borders

Control section border appearance.

With Border

Section with border

No Border

Section without border

react-icon

SectionBorders.tsx

<Col lg>
  <Section border>
    <Text semibold>With Border</Text>
    <Text>Section with border</Text>
  </Section>
  <Section noBorder>
    <Text semibold>No Border</Text>
    <Text>Section without border</Text>
  </Section>
</Col>

Section Shapes

Sections support different border radius styles.

Default Rounded

Default rounded corners

Pill Shape

Pill-shaped section

Sharp Corners

Sharp cornered section

react-icon

SectionShapes.tsx

<Col lg>
  <Section>
    <Text semibold>Default Rounded</Text>
    <Text>Default rounded corners</Text>
  </Section>
  <Section pill>
    <Text semibold>Pill Shape</Text>
    <Text>Pill-shaped section</Text>
  </Section>
  <Section sharp>
    <Text semibold>Sharp Corners</Text>
    <Text>Sharp cornered section</Text>
  </Section>
</Col>

Section with Shadow

Sections can have drop shadows.

With Shadow

Section with drop shadow

No Shadow

Section without shadow

react-icon

SectionwithShadow.tsx

<Col lg>
  <Section shadow>
    <Text semibold>With Shadow</Text>
    <Text>Section with drop shadow</Text>
  </Section>
  <Section noShadow>
    <Text semibold>No Shadow</Text>
    <Text>Section without shadow</Text>
  </Section>
</Col>

Section with Ring

Sections can have focus rings.

With Ring

Section with focus ring

No Ring

Section without ring

react-icon

SectionwithRing.tsx

<Col lg>
  <Section ring>
    <Text semibold>With Ring</Text>
    <Text>Section with focus ring</Text>
  </Section>
  <Section noRing>
    <Text semibold>No Ring</Text>
    <Text>Section without ring</Text>
  </Section>
</Col>

Section Reverse

Reverse the order of items in the section.

Normal Order

First item

Second item

Third item

Reverse Order

First item

Second item

Third item

react-icon

SectionReverse.tsx

<Col lg>
  <Section>
    <Text semibold>Normal Order</Text>
    <Text>First item</Text>
    <Text>Second item</Text>
    <Text>Third item</Text>
  </Section>
  <Section reverse>
    <Text semibold>Reverse Order</Text>
    <Text>First item</Text>
    <Text>Second item</Text>
    <Text>Third item</Text>
  </Section>
</Col>