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.

Installation Component

---
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.

Button

A section with a subtle variant

This section has a subtle variant.

Button

A section with an outline variant

This section has an outline variant.

Button

A section with a soft variant

This section has a soft variant.

Button

A section with a surface variant

This section has a surface variant.

Button

---
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.