Section
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.
---
import Button from 'fulldev-ui/components/Button.astro'
import Heading from 'fulldev-ui/components/Heading.astro'
import Image from 'fulldev-ui/components/Image.astro'
import Row from 'fulldev-ui/components/Row.astro'
import Section from 'fulldev-ui/components/Section.astro'
import Text from 'fulldev-ui/components/Text.astro'
---
<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="/images/placeholder-landscape.webp" />
</Section>
Props
| Prop | Type | Default |
|---|---|---|
| position | 'background' | 'cover' | 'inset' | - |
| ratio | 'landscape' | 'portrait' | 'square' | number | - |
| mask | 'sm' | 'md' | 'lg' | - |
| buttons | ComponentProps<typeof Button<'a'>>[] | - |
| button | ComponentProps<typeof Button<'a'>> | - |
| cards | ComponentProps<typeof Card<'a'>>[] | - |
| badge | string | ComponentProps<typeof Badge<'a'>> | - |
| image | ComponentProps<typeof Image>['src'] | - |
| rating | number | - |
| pages | CollectionEntry<'pages'>['data'][] | - |
| records | CollectionEntry<'records'>['data'][] | - |
| heading | string | - |
| title | string | - |
| text | string | - |
| html | string | - |
| description | string | - |
| label | string | - |
| tagline | string | - |
| list | string[] | - |
| theme | 'light' | 'dark' | - |
| color | 'base' | 'brand' | - |
| size | 'sm' | 'md' | 'lg' | - |
| frame | 'none' | 'fill' | 'panel' | none |
| align | 'start' | 'center' | 'end' | start |
| justify | 'start' | 'center' | 'end' | - |
| structure | 'column' | 'split' | 'spread' | 'carousel' | 'grid' | 'masonry' | column |
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
| space | 'auto' | 'none' | auto |
| reverse | 'odd' | 'even' | - |
| variant | 'primary' | 'secondary' | 'tertiary' | secondary |
| as | HTMLTag | section |
| HTML Attributes | Polymorphic<section> | - |
Examples
A section with a ghost variant
This section has a ghost variant.
ButtonA section with a subtle variant
This section has a subtle variant.
ButtonA section with an outline variant
This section has an outline variant.
ButtonA section with a soft variant
This section has a soft variant.
ButtonA section with a surface variant
This section has a surface variant.
Button---
import Button from 'fulldev-ui/components/Button.astro'
import Heading from 'fulldev-ui/components/Heading.astro'
import Section from 'fulldev-ui/components/Section.astro'
import Text from 'fulldev-ui/components/Text.astro'
---
<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>