Fulldev UI

Docs Components Blocks Showcase
Docs Components Blocks
Overview
Introduction Installation Integration Theming Frameworks Showcase
Typography
Heading Label Link List Text
Base
Badge Button Card Checkbox Icon Input Rating Section Select Table Textarea
Structure
Carousel Column Grid Masonry Split Spread Stack

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.

Installation Component
placeholder landscape 
---
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

PropTypeDefault
position'background' | 'cover' | 'inset'-
ratio'landscape' | 'portrait' | 'square' | number-
mask'sm' | 'md' | 'lg'-
buttonsComponentProps<typeof Button<'a'>>[]-
buttonComponentProps<typeof Button<'a'>>-
cardsComponentProps<typeof Card<'a'>>[]-
badgestring | ComponentProps<typeof Badge<'a'>>-
imageComponentProps<typeof Image>['src']-
ratingnumber-
pagesCollectionEntry<'pages'>['data'][]-
recordsCollectionEntry<'records'>['data'][]-
headingstring-
titlestring-
textstring-
htmlstring-
descriptionstring-
labelstring-
taglinestring-
liststring[]-
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' | 'stack'column
level1 | 2 | 3 | 4 | 5 | 62
space'auto' | 'none'auto
reverse'odd' | 'even'-
variant'primary' | 'secondary' | 'tertiary'secondary
asHTMLTagsection
HTML AttributesPolymorphic<section>-

Examples

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 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>
← Rating Select →