Content
Typed blocks for readable prose, structured data, code, and custom composition.
On this page
Sections, prose, and lists
Group content under semantic headings, then compose paragraphs and ordered or unordered lists.
Sections, prose, and lists
https://docs.example.test/content/prose
let prosePage =
docsArticle "content-prose" "Content" "Typed prose blocks." [
docsSection "install" "Install the package" [
docsParagraph "Compose readable documentation from typed content blocks."
docsBullets [ "Add the package"; "Configure assets"; "Render the document" ] ] ]Tables
Present compact metadata and comparisons with responsive horizontal overflow.
Tables
https://docs.example.test/content/tables
let tablePage =
docsArticle "content-table" "Builder comparison" "Compact structured data." [
docsSection "builders" "Builders" [
docsTable [ "Builder"; "Purpose" ] [
[ "docsArticle"; "Guides" ]
[ "docsCanvas"; "Product review" ] ] ] ]Callouts
Highlight a concise warning, note, or constraint without turning the page into a card grid.
Callouts
https://docs.example.test/content/callouts
let calloutPage =
docsArticle "content-callout" "Security" "Important implementation guidance." [
docsSection "boundary" "Trust boundary" [
docsCallout "Security" "Render trusted raw content only at an application-defined boundary." ] ]Code and custom HTML
Use compact Prism-ready code blocks for source and docsCustom when a product needs its own typed HTML composition.
Code and custom HTML
https://docs.example.test/content/custom
let customPage =
docsArticle "content-custom" "Output" "Code and product-owned HTML." [
docsSection "output" "Output" [
docsCode "fsharp" "div { _class \"notice\"; \"Saved\" }"
docsCustom (div { _class "docs-notice-preview"; "Rendered output" }) ] ]