Skip to main content

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
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
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
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
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" }) ] ]