Container

Keeps a page's content to a readable width and gives it a margin at both sides.

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

<template>
  <FsContainer class="w-full">
    <div class="rounded-region border border-border p-4">
      <h2 class="type-section-title text-text">Offertes</h2>
      <p class="type-body text-text">De inhoud blijft op een leesbare breedte, met een marge aan beide kanten.</p>
    </div>
  </FsContainer>
</template>

Usage

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

<template>
  <main>
    <FsContainer>
      <h1 class="type-page-title">Offertes</h1>
    </FsContainer>
  </main>
</template>

A container sets only width and side margins: no vertical space and no background. For vertical rhythm and a background band, put a Section inside it.

Examples

Narrow

For a page of one column, such as a form. Narrow is at most 768 pixels wide; the default, wide, is 1280. In a frame narrower than that, the two look the same.

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

<template>
  <FsContainer width="narrow" class="w-full">
    <div class="rounded-region border border-border p-4">
      <h2 class="type-section-title text-text">Nieuwe offerte</h2>
      <p class="type-body text-text">Een pagina met één kolom, zoals een formulier, is niet breder dan 768 pixels.</p>
    </div>
  </FsContainer>
</template>

Full

For a page that needs the whole window, such as a planning board.

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

<template>
  <FsContainer width="full" class="w-full">
    <div class="rounded-region border border-border p-4">
      <h2 class="type-section-title text-text">Planning</h2>
      <p class="type-body text-text">Een planbord gebruikt het hele venster, minus de marge aan beide kanten.</p>
    </div>
  </FsContainer>
</template>

API Reference

FsContainer

Prop	Type	Default	Description
width	"wide" | "narrow" | "full"	"wide"	How wide the content may grow: `wide` 1280px, `narrow` 768px for a page of one column such as a form, `full` the whole window less the gutters.

Slot	Props	Description
default	any	The page's content.