Module Skyline_text_v2Source

Skyline Text v2 provides typography primitives for UI copy and headings.

It exposes:

Common use-cases:

Layout behavior

Example

  {%html|
    <>
      <Skyline_text_v1.h1> This is some content... </>
      <Skyline_text_v1.view ~size:%{`Md}>The quick brown fox jumps over the lazy dog</>
      <Skyline_text_v1.monospace ~size:%{`Inherit}>let foo = bar</>
    </>
  |}
Sourcemodule Size : sig ... end
Sourcemodule Weight : sig ... end
Sourcemodule Color : sig ... end
Sourcemodule Layout : sig ... end
Sourceval view : ?test_selector:Bonsai_web.Test_selector.t -> ?attrs:Bonsai_web.Vdom.Attr.t list -> ?size:Size.t -> ?weight:Weight.t -> ?color:Color.t -> ?layout:Layout.t -> Bonsai_web.Vdom.Node.t list -> Bonsai_web.Vdom.Node.t

view renders body text. It inherits whatever the current font-family is.

  • ?size typography size on the Size scale (default `Inherit)
  • ?weight typography weight on the Weight scale (default `Inherit)
  • ?color text color (default `Inherit)
  • ?attrs additional attrs to apply to the underlying span (default )
  • ?test_selector test hook (default None)
  • Positional argument is content nodes to render inside the element, usually just text

Returns a <span> node.

Sourceval monospace : ?test_selector:Bonsai_web.Test_selector.t -> ?attrs:Bonsai_web.Vdom.Attr.t list -> ?size:Size.t -> ?weight:Weight.t -> ?color:Color.t -> ?layout:Layout.t -> Bonsai_web.Vdom.Node.t list -> Bonsai_web.Vdom.Node.t

monospace renders body text with a monospace font family.

Use monospace when you just want the monospace font. Use inline_code when you want text to visually look like a code snippet (includes background color, padding, and border-radius).

Parameters are the same as view.

link renders inline text as a link (<a> tag).

It mirrors the view API and additionally supports semantic coloring via ~intent and arbitrary click actions via ~on_click, similar to Skyline_button_v2.view when used with the Link variant.

  • ?attrs additional attrs to apply to the underlying anchor (default )
  • ?test_selector test hook (default None)
  • ?size typography size on the Size scale (default `Inherit)
  • ?weight typography weight on the Weight scale (default `Inherit)
  • ?color color for semantic meaning (default `Primary)
  • ?show_external_link_icon when true, shows an external-link icon for Effect.Open_url targets that open in a new tab/window (default true)
  • on_click action to perform when clicked. When passed Effect.open_url, the element renders as an HTML <a href=... target=...> link
  • children content nodes to render inside the element

Returns an <a> node.

h1 renders a level‑1 heading styled according to Skyline typography.

  • ?attrs additional attrs (default )
  • ?test_selector test hook (default None)
  • ?color text color (default `Default)
  • Positional argument is heading content

Returns an <h1> node.

h2 renders a level‑2 heading. Returns an <h2> node.

h3 renders a level‑3 heading. Returns an <h3> node.

h4 renders a level‑4 heading. Returns an <h4> node.

h5 renders a level‑5 heading. Returns an <h5> node.

h6 renders a level‑6 heading. Returns an <h6> node.

Sourceval inline_code : ?test_selector:Bonsai_web.Test_selector.t -> ?attrs:Bonsai_web.Vdom.Attr.t list -> ?size:Size.t -> ?weight:Weight.t -> ?color:Color.t -> Bonsai_web.Vdom.Node.t list -> Bonsai_web.Vdom.Node.t

inline_code renders an inline code element with typography styling.

Use inline_code when you want text to visually look like a code snippet — it includes a background color, padding, and border-radius in addition to the monospace font. Use monospace when you just want the monospace font without additional styling.

  • ?test_selector test hook (default None)
  • ?attrs additional attrs (default )
  • ?size typography size on the Size scale (default `Inherit)
  • ?weight typography weight on the Weight scale (default `Inherit)
  • ?color text color (default `Inherit)
  • Positional argument is code content

Returns a <code> node.

Sourcemodule For_docs : sig ... end