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={{ src: '/images/placeholder-landscape.webp' }}
/>

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' \| 'stack'	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>	-

Overview

Typography

Base

Structure

Section

A section with equal columns

Props