Skyline_text_v1SourceHelpers for rendering styled text in a web UI. Skyline provides a range of text sizes and styles that can be freely combined and are designed to be visually coherent.
Text comes in two main variants and four sizes:
{table
{tr {th Text variant} {th [span]} {th [heading]} }
{tr {td Smallest size} {td [Small]} {td {i N/A}}
{tr {td } {td [Regular]} {td [Small]}
{tr {td } {td [Large]} {td [Regular]}
{tr {td Largest size} {td {i N/A}} {td [Large]}
}
}Beyond text size, there are also options that control font-family, font-style, text color based on Intents, and others.
val heading :
?attrs:Bonsai_web.Vdom.Attr.t list ->
?font:Font_family.t ->
?style:Font_style.t ->
?size:Font_size.t ->
?decoration:Text_decoration.t ->
?align:Css_gen.text_align ->
?intent:Skyline_theme_v1.Color.t ->
string ->
Bonsai_web.Vdom.Node.tText for a heading, rendered as HTML <h{1,2,3}/> tags. This style of font should be used to display page titles, headings for sections, etc.
A Small heading is visually the same size as a Regular span.
val heading' :
?attrs:Bonsai_web.Vdom.Attr.t list ->
?font:Font_family.t ->
?style:Font_style.t ->
?size:Font_size.t ->
?decoration:Text_decoration.t ->
?align:Css_gen.text_align ->
?intent:Skyline_theme_v1.Color.t ->
Bonsai_web.Vdom.Node.t list ->
Bonsai_web.Vdom.Node.tThe same as heading, except it allows its children to be anything.
val span :
?attrs:Bonsai_web.Vdom.Attr.t list ->
?font:Font_family.t ->
?style:Font_style.t ->
?size:Font_size.t ->
?decoration:Text_decoration.t ->
?align:Css_gen.text_align ->
?intent:Skyline_theme_v1.Color.t ->
?secondary:bool ->
string ->
Bonsai_web.Vdom.Node.tRegular text, rendered as HTML <span/> tag. This style of font should be used to display any kind of text that is not semantically a heading.
A Large span is visually the same size as a Regular heading.
val span' :
?attrs:Bonsai_web.Vdom.Attr.t list ->
?font:Font_family.t ->
?style:Font_style.t ->
?size:Font_size.t ->
?decoration:Text_decoration.t ->
?align:Css_gen.text_align ->
?intent:Skyline_theme_v1.Color.t ->
?secondary:bool ->
Bonsai_web.Vdom.Node.t list ->
Bonsai_web.Vdom.Node.tThe same as span, except it allows its children to be anything.
val link :
?attrs:Bonsai_web.Vdom.Attr.t list ->
?font:Font_family.t ->
?style:Font_style.t ->
?size:Font_size.t ->
?decoration:Text_decoration.t ->
?align:Css_gen.text_align ->
?intent:Skyline_theme_v1.Color.t ->
?target:[ `Self | `Blank ] ->
href:string ->
string ->
Bonsai_web.Vdom.Node.tA link, rendered as an HTML <a/> tag, that can be used inline with text.
val link' :
?attrs:Bonsai_web.Vdom.Attr.t list ->
?font:Font_family.t ->
?style:Font_style.t ->
?size:Font_size.t ->
?decoration:Text_decoration.t ->
?align:Css_gen.text_align ->
?intent:Skyline_theme_v1.Color.t ->
?target:[ `Self | `Blank ] ->
href:string ->
Bonsai_web.Vdom.Node.t list ->
Bonsai_web.Vdom.Node.tThe same as link, except it allows its children to be anything.
val link_with_effect :
?attrs:Bonsai_web.Vdom.Attr.t list ->
?font:Font_family.t ->
?style:Font_style.t ->
?size:Font_size.t ->
?decoration:Text_decoration.t ->
?align:Css_gen.text_align ->
?intent:Skyline_theme_v1.Color.t ->
on_click:unit Bonsai_web.Effect.t ->
string ->
Bonsai_web.Vdom.Node.tA link rendered as an HTML <a/> tag that performs an effect instead of having an href
val link_with_effect' :
?attrs:Bonsai_web.Vdom.Attr.t list ->
?font:Font_family.t ->
?style:Font_style.t ->
?size:Font_size.t ->
?decoration:Text_decoration.t ->
?align:Css_gen.text_align ->
?intent:Skyline_theme_v1.Color.t ->
on_click:unit Bonsai_web.Effect.t ->
Bonsai_web.Vdom.Node.t list ->
Bonsai_web.Vdom.Node.tThe same as link_with_effect, except it allows its children to be anything