Section

Please see the blocks page for more examples, since they are built using 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 Section from 'fulldev-ui/components/Section.astro'
---

<Section
  heading="A section with equal columns"
  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."
  buttons={[
    {
      variant: 'primary',
      href: '/overview/installation',
      text: 'Installation',
      contrast: true,
    },
    { variant: 'secondary', href: '/structure/split', text: 'Component' },
  ]}
  image={'/images/placeholder-landscape.webp'}
/>

Props

Prop	Type	Default
image	ComponentProps<typeof Image>['src']	-
position	ComponentProps<typeof Image>['position']	-
buttons	ComponentProps<typeof Buttons>['buttons']	-
button	ComponentProps<typeof Button>	-
variant	ComponentProps<typeof Button>['variant']	-
cards	ComponentProps<typeof Cards>['cards']	-
panel	ComponentProps<typeof Card>['panel']	-
pages	CollectionEntry<'pages'>['data'][]	-
records	CollectionEntry<'records'>['data'][] structure?: \| ComponentProps<typeof Cards>['structure'] \| 'column' \| 'split' \| 'spread'	-
size	'sm' \| 'md' \| 'lg'	-
color	'base' \| 'brand'	-
contrast	boolean	-
theme	'light' \| 'dark'	-
level	ComponentProps<typeof Heading>['level']	-
badge	ComponentProps<typeof Badge>	-
tagline	ComponentProps<typeof Tagline>['text']	-
heading	ComponentProps<typeof Heading>['text']	-
text	ComponentProps<typeof Text>['text']	-
list	ComponentProps<typeof List>['items']	-
icon	ComponentProps<typeof Icon>['name']	-
align	'start' \| 'center' \| 'end' rating?: \| ComponentProps<typeof Rating> \| ComponentProps<typeof Rating>['value']	-
HTML Attributes	section	-

Rating Select