Description list
Three-column details
- Type
- Asset
- Commodity
- USD
- Parent account
- Current assets
- Source
- Imported statement
- Status
- Active
- Balance
- $42,800
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let accountDetails =
DescriptionList.create [
DetailField.text "Type" "Asset"
DetailField.text "Commodity" "USD"
DetailField.text "Parent account" "Current assets"
DetailField.text "Source" "Imported statement"
DetailField.status "Status" (Status.positive "Active")
DetailField.text "Balance" "$42,800"
]
|> DescriptionList.withColumns DescriptionListColumns.Three
|> DescriptionList.renderFour-column details
- Status
- Active
- Reconciliation
- Up to date
- Account number
- 1040
- Currency
- USD
- Account name
- Operating checking
- Institution
- Example Bank
- Statement date
- August 31, 2026
- Balance
- $42,800
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let accountOverview =
DescriptionList.create [
DetailField.status "Status" (Status.positive "Active")
DetailField.status "Reconciliation" (Status.positive "Up to date")
DetailField.text "Account number" "1040"
DetailField.text "Currency" "USD"
DetailField.text "Account name" "Operating checking"
DetailField.text "Institution" "Example Bank"
DetailField.text "Statement date" "August 31, 2026"
DetailField.text "Balance" "$42,800"
]
|> DescriptionList.withColumns DescriptionListColumns.Four
|> DescriptionList.renderWith supporting text
- Available balance
- $42,800
Includes cleared entries through today.
- Statement reference
- statement-2026-08-31-operating-checking-1040
Imported from the August bank statement.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let accountDetailsWithDescriptions =
DescriptionList.create [
DetailField.text "Available balance" "$42,800"
|> DetailField.withDescription "Includes cleared entries through today."
DetailField.text "Statement reference" "statement-2026-08-31-operating-checking-1040"
|> DetailField.withDescription "Imported from the August bank statement."
]
|> DescriptionList.withColumns DescriptionListColumns.Two
|> DescriptionList.render