Skip to main content

Section header

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

Account details

open FSharp.ViewEngine
open Acme.Components
open type Html

let sectionHeader = SectionHeader.create "Account details" |> SectionHeader.render

On this page

dotnet fve add section-header --config src/Acme.Components/fve.json

open FSharp.ViewEngine
open Acme.Components
open type Html

let sectionHeader = SectionHeader.create "Account details" |> SectionHeader.render

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

Description, actions and divider

Recent transactions

Activity in the current reporting period.

open FSharp.ViewEngine
open Acme.Components
open type Html

let sectionHeaderWithActions =
    SectionHeader.create "Recent transactions" |> SectionHeader.withDescription "Activity in the current reporting period."
    |> SectionHeader.withActions (Button.create (ButtonContent.Text "Export") |> Button.disabled |> Button.render)
    |> SectionHeader.withDivider |> SectionHeader.render

type SectionHeadingLevel =
    | H2
    | H3

type SectionHeaderConfig

module SectionHeader =
    val create : title:string -> SectionHeaderConfig
    val withDescription : description:string -> config:SectionHeaderConfig -> SectionHeaderConfig
    val withLevel : level:SectionHeadingLevel -> config:SectionHeaderConfig -> SectionHeaderConfig
    val withActions : actions:HtmlElement -> config:SectionHeaderConfig -> SectionHeaderConfig
    val withDivider : config:SectionHeaderConfig -> SectionHeaderConfig
    val render : config:SectionHeaderConfig -> HtmlElement