Skip to content

Section

Use this as the main wrapper for your full-width sections.

A section with equal columns

On mobile it's a single column, of course. All without having to think about responsiveness. It just works. Have a look at the code, it's down below.

placeholder
---
import { Button, Heading, Image, Row, Section, Text } from 'fulldev-ui'
---
<Section>
<Heading> A section with equal columns </Heading>
<Text>
On mobile it's a single column, of course. All without having to think about
responsiveness. It just works. Have a look at the code, it's down below.
</Text>
<Row>
<Button href="/overview/installation">Installation</Button>
<Button variant="soft" href="/structure/split"> Component </Button>
</Row>
<Image src="/placeholder.jpeg" />
</Section>

Props

Prop Type Default
structure column | split | spread column
frame fill | viewport | contain | panel fill
variant ghost | subtle | outline | soft | surface ghost
align start | center | end start
size sm | md | lg -
compact attribute -
theme string -
text string -
html string -
as HTMLTag section
HTML Attributes Polymorphic<as> -

Examples

variant

Sets the color variant used for this component and all its children.

A section with a ghost variant

This section has a ghost variant.

A section with a subtle variant

This section has a subtle variant.

A section with an outline variant

This section has an outline variant.

A section with a soft variant

This section has a soft variant.

A section with a surface variant

This section has a surface variant.

---
import { Button, Heading, Section, Text } from 'fulldev-ui'
---
<Section variant="ghost" frame="panel">
<Heading> A section with a ghost variant </Heading>
<Text> This section has a ghost variant. </Text>
<Button> Button </Button>
</Section>
<Section variant="subtle" frame="panel">
<Heading> A section with a subtle variant </Heading>
<Text> This section has a subtle variant. </Text>
<Button> Button </Button>
</Section>
<Section variant="outline" frame="panel">
<Heading> A section with an outline variant </Heading>
<Text> This section has an outline variant. </Text>
<Button> Button </Button>
</Section>
<Section variant="soft" frame="panel">
<Heading> A section with a soft variant </Heading>
<Text> This section has a soft variant. </Text>
<Button> Button </Button>
</Section>
<Section variant="surface" frame="panel">
<Heading> A section with a surface variant </Heading>
<Text> This section has a surface variant. </Text>
<Button> Button </Button>
</Section>

structure

Applies all styles & props of the chosen Structure component to this component.

column

Structures children in a vertical stack and sets dynamic margins between them.

For example, the margin between a heading and a paragraph is smaller than the margin between a paragraph an image.

split

Equal columns above a certain breakpoint, based on CSS grid.

On small screens it behaves the same as column.

spread

Structures children in a row with space between them and wrapping.