Section

A titled part of a page, with its heading, an optional description and room for actions.

<script setup lang="ts">
import { FsSection } from '@fivespark/ui'
</script>

<template>
  <FsSection title="Recente orders" :level="2" class="w-full">
    <p class="type-body">Order 1042 · Bakker BV · Betaald</p>
  </FsSection>
</template>

Usage

<script setup lang="ts">
import { FsSection } from '@fivespark/ui'
</script>

<template>
  <FsSection title="Openstaande offertes" :level="2">
    …
  </FsSection>
</template>

title and level are both required: the level is the heading level your page needs at that spot, and it is never worked out from nesting. The page's own h1 stays outside. The section adds no padding or border; for a boxed group of content use Card.

Examples

With a description

One line or two under the title.

<script setup lang="ts">
import { FsSection } from '@fivespark/ui'
</script>

<template>
  <FsSection title="Openstaande offertes" :level="2" description="4 offertes wachten op akkoord" class="w-full">
    <p class="type-body">Offerte 2026-041 · Acme Bouw BV · € 1.250,00</p>
  </FsSection>
</template>

With actions

The actions slot puts buttons or links for the whole section at the end of the title's row.

<script setup lang="ts">
import { FsButton, FsSection } from '@fivespark/ui'
</script>

<template>
  <FsSection title="Openstaande offertes" :level="2" class="w-full">
    <template #actions>
      <FsButton label="Exporteren" />
      <FsButton label="Nieuwe offerte" variant="primary" />
    </template>
    <p class="type-body">Offerte 2026-041 · Acme Bouw BV · € 1.250,00</p>
  </FsSection>
</template>

Nested

A section inside a section takes the next level down.

<script setup lang="ts">
import { FsSection } from '@fivespark/ui'
</script>

<template>
  <FsSection title="Planning" :level="2" class="w-full">
    <FsSection title="Maandag" :level="3">
      <p class="type-body">Montage bij Bouwbedrijf Jansen</p>
    </FsSection>
    <FsSection title="Dinsdag" :level="3">
      <p class="type-body">Levering bij Bakker BV</p>
    </FsSection>
  </FsSection>
</template>

API Reference

FsSection

Prop	Type	Default	Description
title	string	required	The section's heading.
level	2 | 3 | 4 | 5 | 6	required	The heading's level, as the page around the section needs. Every level looks the same.
description	string		One line or two below the title.

Slot	Props	Description
actions	any	Buttons at the end of the header, for what can be done with the section.
default	any	The section's content.