Prose

Styles running text that you do not mark up yourself: notes from an editor, a help page, a contract's terms.

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

<template>
  <FsProse class="w-full">
    <h2>Levering</h2>
    <p>De offerte wordt binnen <strong>vijf werkdagen</strong> geleverd, zie <a href="#voorwaarden">de voorwaarden</a>.</p>
    <ul>
      <li>Montage op werkdagen</li>
      <li>Voorrijkosten zijn inbegrepen</li>
    </ul>
  </FsProse>
</template>

Usage

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

<template>
  <FsProse>
    <div v-html="opgeschoondeNotitie" />
  </FsProse>
</template>

Prose styles the plain HTML elements inside it: headings, paragraphs, lists, links, quotes, tables and code. It does not render or clean HTML, so sanitise anything you pass to v-html first. Prose caps its lines at 60 characters. For the interface itself use the components, not prose.

Examples

Large

size="lg" is 16px, for long reading. The default is 14px, to sit among the interface.

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

<template>
  <FsProse size="lg" class="w-full">
    <h2>Betaling</h2>
    <p>Betaling vindt plaats binnen dertig dagen na de factuurdatum. Bij een latere betaling brengen we de wettelijke rente in rekening.</p>
    <blockquote><p>Afspraak is afspraak.</p></blockquote>
  </FsProse>
</template>

A component inside the text

Wrap a component in not-prose so the text styles do not reach it.

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

<template>
  <FsProse class="w-full">
    <h3>Garantie</h3>
    <p>Op de montage geven we twee jaar garantie.</p>
    <div class="not-prose">
      <FsAlert status="warning" title="Let op" description="De garantie vervalt bij eigen aanpassingen." />
    </div>
  </FsProse>
</template>

API Reference

FsProse

Prop	Type	Default	Description
size	"default" | "lg"	"default"	The text's size: `default` 14px, to sit among the interface; `lg` 16px, for long reading.

Slot	Props	Description
default	any	The long-form HTML to set.