Card

An independently installable component. Its content and surrounding layout remain consumer-owned.

Consumer-authored content.

open FSharp.ViewEngine
open Acme.Components
open type Html

let card = Card.create (p { _class "text-sm"; "Consumer-authored content." }) |> Card.render

On this page

dotnet fve add card --config src/Acme.Components/fve.json

open FSharp.ViewEngine
open Acme.Components
open type Html

let card = Card.create (p { _class "text-sm"; "Consumer-authored content." }) |> Card.render

The action variants additionally compose Button. Install button when copying those examples; the component itself accepts ordinary consumer-authored HTML.

Header and footer

Account review

September close

Review the account before publishing the report.

open FSharp.ViewEngine
open Acme.Components
open type Html

let cardWithParts =
    Card.create (p { _class "text-sm text-[var(--fve-muted-text)]"; "Review the account before publishing the report." })
    |> Card.withHeader (div { _class "grid gap-1"; h3 { _class "text-base font-semibold"; "Account review" }; p { _class "text-sm text-[var(--fve-muted-text)]"; "September close" } })
    |> Card.withFooter (Button.create (ButtonContent.Text "Publish report") |> Button.disabled |> Button.render)
    |> Card.render

Consumer-authored media

FSharp.ViewEngine — Typed HTML views for F#

Social card

Repository-owned social artwork.

open FSharp.ViewEngine
open Acme.Components
open type Html

let mediaCard =
    Card.create (p { _class "text-sm text-[var(--fve-muted-text)]"; "Repository-owned social artwork." })
    |> Card.withMedia (img { _src "/social-card.png"; _alt "FSharp.ViewEngine — Typed HTML views for F#"; _class "aspect-video w-full object-contain" })
    |> Card.withHeader (h3 { _class "text-base font-semibold"; "Social card" })
    |> Card.withSize CardSize.Small |> Card.render

type CardSize =
    | Regular
    | Small

type CardConfig

module Card =
    val create : content:HtmlElement -> CardConfig
    val withHeader : header:HtmlElement -> config:CardConfig -> CardConfig
    val withMedia : media:HtmlElement -> config:CardConfig -> CardConfig
    val withFooter : footer:HtmlElement -> config:CardConfig -> CardConfig
    val withSize : size:CardSize -> config:CardConfig -> CardConfig
    val withAttributes : attributes:HtmlAttribute list -> config:CardConfig -> CardConfig
    val render : config:CardConfig -> HtmlElement

Card

Default

Header and footer

Account review

Consumer-authored media

Social card