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
position	'background' \| 'cover' \| 'inset' \| undefined	-
buttons	ComponentProps<typeof Button<'a'>>[] \| undefined	-
button	ComponentProps<typeof Button<'a'>> \| undefined	-
cards	ComponentProps<typeof Card<'a'>>[] \| undefined	-
badge	string \| ComponentProps<typeof Badge<'a'>> \| undefined	-
image	ComponentProps<typeof Image>['src'] \| undefined	-
rating	number \| undefined	-
pages	CollectionEntry<'pages'>['data'][] \| undefined	-
records	CollectionEntry<'records'>['data'][] \| undefined	-
heading	string \| undefined	-
title	string \| undefined	-
text	string \| undefined	-
html	string \| undefined	-
description	string \| undefined	-
label	string \| undefined	-
tagline	string \| undefined	-
list	string[] \| undefined	-
theme	'light' \| 'dark' \| undefined	-
color	'base' \| 'brand' \| undefined	-
size	'sm' \| 'md' \| 'lg' \| undefined	-
align	'start' \| 'center' \| 'end' \| undefined	start
justify	'start' \| 'center' \| 'end' \| undefined	-
structure	'column' \| 'split' \| 'spread' \| 'carousel' \| 'grid' \| 'masonry' \| 'stack' \| undefined	column
level	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined	2
space	'auto' \| 'none' \| undefined	auto
reverse	'odd' \| 'even' \| undefined	-
variant	'primary' \| 'secondary' \| 'tertiary' \| undefined	secondary
panel	boolean \| undefined	-
as	HTMLTag	section
HTML Attributes	Polymorphic<section>	-

Rating Select