Module

Yoga.React.DOM.HTML

Package: purescript-yoga-react-dom
Repository: rowtype-yoga/purescript-yoga-react-dom

Re-exports from Yoga.React.DOM.HTML.A

#a_ Source

a_ :: FFIComponent_ AnchorAttributes

The <a> (anchor) tag in HTML, which is used to create hyperlinks.

#a Source

a :: FFIComponent AnchorAttributes

The <a> (anchor) tag in HTML, which is used to create hyperlinks. Most common attributes:

| Attribute | Type | Example | Description | |-------------------|----------|-------------------------------|-------------| | href | String | "https://example.com" | Specifies the URL that the hyperlink points to. | | target | Target | "targetBlank" | Determines where the linked document will open. | | download | String | "file.pdf" | Indicates that the target will be downloaded when a user clicks on the hyperlink. | | rel | String | "nofollow" | Describes the relationship between the current document and the linked document. | | title | String | "Go to the home page" | Renders additional information about an element, typically displayed as tooltip text. | | aria-label | String | "Read more about cats" | Used for accessibility, offering a description of the hyperlink's purpose for screen reader users. | | aria-describedby| String | "desc1" | Also used for accessibility, offering a description of the hyperlink's purpose for screen reader users. |

Re-exports from Yoga.React.DOM.HTML.Abbr

#abbr Source

abbr :: FFIComponent BaseAttributes

The <abbr> tag in HTML, used for specifying abbreviations.

Example:

abbr { title: "abbreviation" }
  "abbr"

Re-exports from Yoga.React.DOM.HTML.Address

#address Source

address :: FFIComponent BaseAttributes

The <address> tag in HTML, represents the contact information for its nearest <article> or <body> ancestor. If that is the <body>, then it applies to the whole document.

Example:

address { className: "contact-info" } "123 Example Street, Example City"

Re-exports from Yoga.React.DOM.HTML.Area

#area Source

area :: FFIComponent_ BaseAttributes

The <area> element in HTML, defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element. area is a void element—it does not have any children

The shape attribute defines the shape of the area (rectangle, circle, or polygon), and the coords indicates the size of the area.

Example:

area { shape: "rect", coords: "34,44,270,350", href: "http://www.example.com" }

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|----------------------------|-------------| | shape | String | "rect" | Defines the shape of the region. | | coords | String | "34,44,270,350" | A set of values specifying the coordinates of the hot-spot region. | | href | String | "http://www.example.com" | Specifies the hyperlink target for the area. | | alt | String | "Example Area" | Alternative text for the area. Used by screen readers for accessibility. |

Re-exports from Yoga.React.DOM.HTML.Article

#article Source

article :: FFIComponent BaseAttributes

The <article> element in HTML, represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content.

Example:

article { className: "blog-post" } [ h1 {} "Blog Post Title", p {} "Content of the blog post" ]

Re-exports from Yoga.React.DOM.HTML.Aside

#aside Source

aside :: FFIComponent BaseAttributes

The <aside> element in HTML, represents a portion of a document whose content is only indirectly related to the document's main content. Asides are often used as sidebars or call-out boxes.

Example:

aside { className: "sidebar" } [ h1 {} "Sidebar Title", p {} "Sidebar content" ]

Re-exports from Yoga.React.DOM.HTML.Audio

#audio Source

audio :: FFIComponent AudioAttributes

The <audio> element in HTML, is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element.

Example:

audio { src: "/media/sound.mp3", controls: true, autoplay: false } (a { href: "/media/sound.mp3" } "Download audio")

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|------------------|-------------| | src | String | "/path/to/audio"| The URL of the audio to embed. | | controls | Boolean| true | If this attribute is present, the browser will provide controls to allow the user to control audio playback. | | autoplay | Boolean| false | If specified, the audio will automatically begin playback as soon as it can do so without stopping to finish loading the data. | | loop | Boolean| false | If specified, the audio will automatically start over when finished. |

Re-exports from Yoga.React.DOM.HTML.B

#b Source

b :: FFIComponent BaseAttributes

The <b> element in HTML, represents text which is stylistically different from normal text without any special importance. This could be a keyword or product name in a text. It's essentially used to draw the reader's attention to the element's contents, which are not otherwise granted special importance.

Example:

b { className: "bold-text" } "This is a bold text"

Re-exports from Yoga.React.DOM.HTML.Base

#base Source

base :: FFIComponent_ BaseAttributes

The <base> element in HTML, which must be empty, specifies the base URL and or target for all relative URLs in a document. There can be only one <base> element in a document, and it must be inside the <head> element.

Example:

base { href: "https://www.example.com", target: targetBlank }

Note: It supports two attributes href and target. href specifies the base URL for all relative URLs in a document. target specifies the default target for all hyperlinks and forms in the document.

Re-exports from Yoga.React.DOM.HTML.Bdi

#bdi Source

bdi :: FFIComponent BaseAttributes

The <bdi> (Bi-directional Isolation) element in HTML, isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown text direction.

Example:

bdi {} "Text in unknown direction"

Re-exports from Yoga.React.DOM.HTML.Bdo

#bdo Source

bdo :: FFIComponent BdoAttributes

The <bdo> (Bi-directional Override) element in HTML, is used to override the current directionality of text. It causes the directionality of the characters to be ignored in favor of the specified directionality.

Example:

bdo { dir: dirRightToLeft } "This text will go right to left"

Note: It supports one attribute dir, which can have two valid values: ltr (Left-To-Right) or rtl (Right-To-Left).

Re-exports from Yoga.React.DOM.HTML.Blockquote

#blockquote Source

blockquote :: FFIComponent BlockquoteAttributes

The <blockquote> element in HTML, represents a section that is quoted from another source.

Content inside a <blockquote> must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

Example:

blockquote { cite: "https://www.example.com/source" } "Quotation from the cited source"

Re-exports from Yoga.React.DOM.HTML.Body

#body Source

body :: FFIComponent BaseAttributes

The <body> element in HTML, represents the content of an HTML document. There can be only one <body> element in a document.

Example:

body { } [ p { } "Hello, World!" ]

Re-exports from Yoga.React.DOM.HTML.Br

#br Source

br :: FFIComponent_ BaseAttributes

The <br> element in HTML, produces a line break in text (carriage-return). It is useful for writing a poem or a speech, where the division of lines is significant. Please note that the <br> can't have children.

Example:

"This is a line of text." ++ br {} ++ "This is a new line of text."

Re-exports from Yoga.React.DOM.HTML.Button

#button_ Source

button_ :: FFIComponent_ ButtonProps

The <button> tag in HTML without children, represents a clickable button.

Example:

button { type: "button", className: "submit-button" }

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | type | String | "button" | The type of the button. | | className | String | "submit-button" | The class of the button for applying CSS styles. | | disabled | Boolean| true | Specifies that the button should be disabled. | | form | String | "form-id" | Specifies the form the button belongs to. |

#button Source

button :: FFIComponent ButtonProps

The <button> tag in HTML, represents a clickable button.

Example:

button { type: "button", className: "submit-button" } "Click me"

Re-exports from Yoga.React.DOM.HTML.Canvas

#canvas Source

canvas :: FFIComponent CanvasAttributes

The <canvas> element in HTML, is used to draw graphics via scripting (usually JavaScript). By default, it creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown.

Example:

canvas { id: "myCanvas", width: 200.0, height: 200.0 }

Note: It primarily takes two attributes height and width which specify the height and width of the canvas respectively.

Re-exports from Yoga.React.DOM.HTML.Caption

#caption Source

caption :: FFIComponent BaseAttributes

The <caption> element in HTML, specifies the caption (or title) of a table. If it is not included in the HTML, there will be no caption. However, if it is included, it must be the first child of its parent <table> element.

Example:

table { }
  [ caption { } "This is a caption"
  , thead { } [ ... ]
  , tbody { } [ ... ]
  ]

Re-exports from Yoga.React.DOM.HTML.Cite

#cite Source

cite :: FFIComponent BaseAttributes

The <cite> element in HTML, represents a reference to a creative work. It must include the title of a work or a URL reference, which may be in an abbreviated form according to the conventions used for the addition of citation metadata.

Example:

cite { } "The Title of the Work"

Re-exports from Yoga.React.DOM.HTML.Code

#code Source

code :: FFIComponent BaseAttributes

The <code> element in HTML, is used to display a code snippet in a fixed-width font that is easy to read. It is a phrase tag and is used to represent a piece of computer code.

Example:

code { } """main = log $ "Hello," <> "World!""""

Re-exports from Yoga.React.DOM.HTML.Col

#col Source

col :: FFIComponent_ ColAttributes

The <col> element in HTML, provides a way to group columns of data together in a table and apply styles to them. It's used inside a <colgroup> element. Importantly, <col> is an empty element that doesn't have child nodes.

Example:

col { span: 2, className: "myClass" }

Re-exports from Yoga.React.DOM.HTML.ColGroup

#colgroup Source

colgroup :: FFIComponent ColGroupAttributes

Re-exports from Yoga.React.DOM.HTML.Data

#dataElem Source

dataElem :: FFIComponent DataAttributes

The <data> element in HTML, links a given content with a machine-readable translation. It lets you associate a data value with content that, while being machine-readable, is also human-readable.

Note: <data> only has a semantic effect when the 'value' attribute is set.

Example:

dataElem { value: "15" } "$15"

Re-exports from Yoga.React.DOM.HTML.DataList

#datalist Source

datalist :: FFIComponent BaseAttributes

The <datalist> element in HTML, provides a "autocomplete" feature on input elements. Users will see a drop-down list of pre-defined options as they input data.

Note: <datalist> is connected to an <input> element with the list attribute.

Example:

datalist { id: "browsers" } [option { value: "Firefox" }, option { value: "Chrome" }, option { value: "Opera" }, option { value: "Safari" }]

Re-exports from Yoga.React.DOM.HTML.Dd

#dd Source

dd :: FFIComponent BaseAttributes

The <dd> HTML element indicates the description of a term in a description list (<dl>), enclosed by <dt> (term) and <dd> (description). Each pair of <dt> and <dd> shares a common parent <dl>.

Example:

dl { }
 [ dt { } [ text "Term 1" ]
 , dd { } [ text "Description of Term 1" ]
 , dt { } [ text "Term 2" ]
 , dd { } [ text "Description of Term 2" ]
 ]

Re-exports from Yoga.React.DOM.HTML.Del

#del Source

del :: FFIComponent BaseAttributes

The <del> HTML element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example.

Example:

del {} "This text has been deleted from the document."

Re-exports from Yoga.React.DOM.HTML.Details

#details Source

details :: FFIComponent DetailsAttributes

Re-exports from Yoga.React.DOM.HTML.Dfn

#dfn Source

dfn :: FFIComponent BaseAttributes

The <dfn> HTML element represents the defining instance of a term in a document.

Example:

dfn {} "This is a defining instance of a term."

Re-exports from Yoga.React.DOM.HTML.Dialog

#dialog Source

dialog :: FFIComponent DialogAttributes

Re-exports from Yoga.React.DOM.HTML.Div

#div_ Source

div_ :: FFIComponent_ BaseAttributes

The <div> tag in HTML without children, acts as a container unit which encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

Example:

div_ { id: "header", className: "menu" }
div_ { id: "body", className: "container" }

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | id | String | "header" | The unique identifier of the div section. | | className | String | "container" | The class of the div section for applying CSS styles. | | data-* | String | "custom-data" | Stores custom data private to the page or application. | | aria-* | String | "aria-labelledby" | Defines accessibility-related attributes. |

#div Source

div :: FFIComponent BaseAttributes

The <div> tag in HTML, acts as a container unit which encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

Example:

div { id: "header", className: "menu" } [ h1 { } "Hello, World!" ]
div { id: "body", className: "container" } [ p { } "Welcome to the website!" ]

Re-exports from Yoga.React.DOM.HTML.Dl

#dl Source

dl :: FFIComponent BaseAttributes

The <dl> HTML element is for grouping together sets of <dt> (term) and <dd> (description) elements, typically used for creating a list of terms along with their associated descriptions.

Example:

dl {}
 [ dt {} "Term 1"
 , dd {} "Description of Term 1"
 , dt {} "Term 2"
 , dd {} "Description of Term 2"
 ]

Re-exports from Yoga.React.DOM.HTML.Dt

#dt Source

dt :: FFIComponent BaseAttributes

The <dt> HTML element specifies a term in a description list (<dl>). This element can exist only as a child element of a description list and it is paired with a <dd> element that provides the definition of a term.

Example:

dt {} "Term 1"

Re-exports from Yoga.React.DOM.HTML.Em

#em Source

em :: FFIComponent BaseAttributes

The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

Example:

em {} "This text is emphasised."

Re-exports from Yoga.React.DOM.HTML.Embed

#embed Source

embed :: FFIComponent_ EmbedAttributes

Re-exports from Yoga.React.DOM.HTML.FieldSet

#fieldset Source

fieldset :: FFIComponent BaseAttributes

The <fieldset> HTML element is a set of form controls optionally grouped under a common name.

Example:

fieldset { } [ text "Form controls go here" ]

Re-exports from Yoga.React.DOM.HTML.Figcaption

#figcaption Source

figcaption :: FFIComponent BaseAttributes

The <figcaption> HTML element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the <figure> element, its direct ancestor.

Example:

figcaption { } "This is a caption for the figure"

Re-exports from Yoga.React.DOM.HTML.Figure

#figure Source

figure :: FFIComponent BaseAttributes

The <figure> HTML element represents self-contained content that's often referenced as a single unit from the main flow of the document.

Example:

figure { } "Content of the figure goes here."

Re-exports from Yoga.React.DOM.HTML.Footer

#footer Source

footer :: FFIComponent BaseAttributes

The <footer> HTML element represents a footer for its nearest sectioning content or sectioning root element.

Example:

footer { } [ text "Footer content goes here." ]

Re-exports from Yoga.React.DOM.HTML.Form

#form Source

form :: FFIComponent FormAttributes

The <form> HTML element represents a form, which is a component of an application that is designed for the performing of an action by the user.

Example:

form { action: "/path/to/submit", method: "post", onSubmit }
  [ input { type: "text", name: "username", value: userName, onChange: onChangeUserName }
  , input { type: "password", name: "password", value: password, onChange: onChangePassword }
  , input { type: "submit", value: "Login" }
  ]

Re-exports from Yoga.React.DOM.HTML.H

#h6 Source

h6 :: FFIComponent BaseAttributes

The <h6> HTML element represents a sixth level heading in the document.

Example:

h6 { } "This is a sixth level heading (h6)"

#h5 Source

h5 :: FFIComponent BaseAttributes

The <h5> HTML element represents a fifth level heading in the document.

Example:

h5 { } "This is a fifth level heading (h5)"

#h4 Source

h4 :: FFIComponent BaseAttributes

The <h4> HTML element represents a fourth level heading in the document.

Example:

h4 { } "This is a fourth level heading (h4)"

#h3 Source

h3 :: FFIComponent BaseAttributes

The <h3> HTML element represents a third level heading in the document.

Example:

h3 { } "This is a third level heading (h3)"

#h2 Source

h2 :: FFIComponent BaseAttributes

The <h2> HTML element represents a second level heading in the document.

Example:

h2 { } "This is a second level heading (h2)"

#h1 Source

h1 :: FFIComponent BaseAttributes

The <h1> HTML element represents a first level heading in the document.

Example:

h1 { } "This is a first level heading (h1)"

Note: Only one <h1> element should be present on a page. It should be the main heading.

Re-exports from Yoga.React.DOM.HTML.HTML

#html Source

html :: FFIComponent BaseAttributes

The <html> tag in HTML, which is the root of an HTML document.

Example:

html { lang: "en" }
  [ head {}
    [ title "Window/Tab title"
    , meta { charSet: "utf-8" }
    ]
  , body {} [ {- main page content -} ]
  ]

Common attributes:

| Attribute | Type | Example | Description | |-----------|----------|---------|-------------| | lang | String | "en" | Language of the website | | dir | String | "ltr" | Text direction (e.g. rtl: right-to-left for Arabic) |

Re-exports from Yoga.React.DOM.HTML.Head

#head Source

head :: FFIComponent BaseAttributes

The <head> tag in HTML, typically includes meta-information about the document such as its title, linked stylesheets and scripts.

Example:

head {}
  [ title "Tab title"
  , meta { charset: "utf-8" }
  , link { rel: "stylesheet", href: "style.css" }
  , script_ { src: "script.js" }
  ]

Re-exports from Yoga.React.DOM.HTML.Header

#header Source

header :: FFIComponent BaseAttributes

The <header> HTML element represents introductory content, typically a group of introductory or navigational aids.

Common attributes: className, id

Example:

header { className: "site-header" } "Introductory content goes here"

Re-exports from Yoga.React.DOM.HTML.Hr

#hr Source

hr :: FFIComponent_ BaseAttributes

The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. This is a void element, it can't have any children or content inside it.

Common attributes: className, id

Example:

hr { className: "section-divider" }

Re-exports from Yoga.React.DOM.HTML.I

#i Source

i :: FFIComponent BaseAttributes

The <i> HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others.

Example:

i {} "This text is rendered in italics."

Re-exports from Yoga.React.DOM.HTML.IFrame

#iframeWithChildren Source

iframeWithChildren :: FFIComponent IFrameAttributes

#iframe Source

iframe :: FFIComponent_ IFrameAttributes

The <iframe> HTML element represents a nested browsing context, effectively embedding another HTML page into the current page.

Example:

iframe
  { src: "https://www.example.com"
  , height: "500"
  , width: "500"
  , name: "Example Frame"
  , sandbox: "allow-scripts allow-top-navigation"
  , srcdoc: "<p>Some embedded HTML</p>"
  , allow: "autoplay; encrypted-media"
  }

Common Attributes

| Name | Type | Description | |----------|--------|-------------| | src | String | Source URL of the embedded content | | height | String | Height of the iframe | | width | String | Width of the iframe | | name | String | Name of the iframe | | sandbox| String | Applies extra restrictions to the iframe's content | | srcdoc | String | Inline HTML to embed | | allow | String | The iframe's feature policy |

Re-exports from Yoga.React.DOM.HTML.Img

#img Source

img :: FFIComponent_ ImgAttributes

The <img> HTML element represents an image in the document.

Example:

img
  { src: "image.jpg"
  , alt: "A beautiful scenery"
  }

Common Attributes:

| Name | Type | Description | |---------|--------|-------------| | src | String | source URL of the image | | alt | String | alternative text for the image for blind and otherwise impaired users |

Re-exports from Yoga.React.DOM.HTML.Input

#input Source

input :: FFIComponent_ InputAttributes

The <input> HTML element represents a field for user input.

Example

input
  { type: "text"
  , name: "username"
  , value: "Default value"
  }

Common Attributes

| Name | Type | Description | |---------|--------|-------------| | type | String | Specifies the input type | | name | String | Specifies the name of the input field | | value | String | Specifies the default value of the input field |

Re-exports from Yoga.React.DOM.HTML.Kbd

#kbd Source

kbd :: FFIComponent BaseAttributes

The <kbd> HTML element denotes text to be input from a keyboard.

Example:

kbd {} "Ctrl + P"

Re-exports from Yoga.React.DOM.HTML.Label

#label Source

label :: FFIComponent LabelAttributes

The <label> HTML element represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the htmlFor attribute.

Example:

[ label { htmlFor: "username" } "Enter your username"
, input { id: "username" }
]
-- or
label {} [ input { id: "username" }, text "Enter your username" ]

Common attributes:

| Name | Type | Description | |------|------|-------------| | htmlFor (id) | String | ID of a labellable form-related element in the same document as the <label> element | | className | String | CSS class of the element |

Re-exports from Yoga.React.DOM.HTML.Legend

#legend Source

legend :: FFIComponent BaseAttributes

The <legend> HTML element represents a caption for the content of its parent <fieldset>.

Example:

legend { } "Account Information"

Re-exports from Yoga.React.DOM.HTML.Li

#li Source

li :: FFIComponent BaseAttributes

The <li> tag in HTML, is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).

Example:

li { className: "item" } "This is a list item"

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | value | Number | 1 | Defines a value for ordered list items | | className | String | "item" | The class of the li for applying CSS styles. | | data-* | String | "custom-data" | Stores custom data private to the page or application. | | aria-* | String | "aria-labelledby" | Defines accessibility-related attributes. |

Re-exports from Yoga.React.DOM.HTML.Link

#link Source

link :: FFIComponent_ LinkAttributes

The <link> tag in HTML, defines the relationship between the current document and an external resource. link is a void element — it can't contain any children

Example:

link { rel: "stylesheet", href: "/style.css" }
link { rel: "icon", type: "image/png", href: "/favicon.png" }

Common attributes: | Attribute | Type | Example | Description | |-----------|----------|----------------|-------------| | href | String | "/style.css" | Location of the linked resource. | | rel | String | "stylesheet" | The relationship between the current document and the linked resource. | | type | String | "image/png" | The media type of the linked resource. | | media | String | "screen" | What media/device the linked resource is optimised for. | | as | String | "fetch" | This attribute is required when rel="preload" has been set on the <link> element, optional when rel="modulepreload" has been set, and otherwise should not be used. | | crossOrigin | String | "anonymous" |

Re-exports from Yoga.React.DOM.HTML.Main

#main Source

main :: FFIComponent BaseAttributes

The <main> HTML element represents the dominant content of the body of a document.

Example:

H.main {} "This is the main content of the document."

Re-exports from Yoga.React.DOM.HTML.Map

#map Source

map :: FFIComponent MapAttributes

The <map> HTML element is used with area elements to define an image map.

Example:

map { name: "planetmap" }
  [ area { shape: "rect", coords: "50,50,100,100", href: "location1.html", alt: "Location 1" }
  , area { shape: "circle", coords: "200,200,50", href: "location2.html", alt: "Location 2" }
  ]

Common attributes:

| Name | Type | Description | |-------------|---------|-------------| | name | String | Name of the image map |

Re-exports from Yoga.React.DOM.HTML.Mark

#mark Source

mark :: FFIComponent BaseAttributes

The <mark> HTML element represents highlighted text.

Example:

mark {} "This text is highlighted."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|---------------|-------------| | className | String | "highlighted" | CSS class of the element |

Re-exports from Yoga.React.DOM.HTML.Meta

#meta Source

meta :: FFIComponent_ MetaAttributes

The <meta> tag in HTML, which provides metadata about the HTML document. Metadata is not displayed but is machine parsable. meta is a void element — it can't contain any children

Example:

-- General meta tags
meta { charSet: "utf-8" }
meta { name: "viewport", content: "width=device-width, initial-scale=1" }
meta { name: "description", content: "This is the description of the page." }
meta { name: "keywords", content: "keyword1, keyword2, keyword3" }

-- Open Graph tags (for Facebook, LinkedIn etc.)
meta { property: "og:title", content: "The Title of the Webpage" }
meta { property: "og:description", content: "The description of the webpage." }
meta { property: "og:image", content: "https://example.com/path/to/image.jpg" }
meta { property: "og:url", content: "https://example.com/page.html" }

-- Twitter card tags
meta { name: "twitter:card", content: "summary_large_image" }
meta { name: "twitter:creator", content: "@username" }
meta { name: "twitter:title", content: "The Title of the Webpage" }
meta { name: "twitter:description", content: "The description of the webpage." }
meta { name: "twitter:image", content: "https://example.com/path/to/image.jpg" }

Common attributes:

| Attribute | Type | Example | Description | |------------|----------|-----------------------------------------|-------------| | charSet | String | "UTF-8" | Specifies the character encoding for the HTML document. | | content | String | "width=device-width, initial-scale=1" | Gives the value associated with the http-equiv or name attribute. | | http-equiv | String | "refresh" | Provides an HTTP header for the information/value of the content attribute. | | name | String | "description" | Defines a name for the metadata. | | property | String | "og:title" | Defines the property the metadata should be associated with. |meta :: FFIComponent_ MetaAttributes

Re-exports from Yoga.React.DOM.HTML.Meter

#meter Source

meter :: FFIComponent MeterAttributes

The <meter> HTML element represents a scalar measurement within a known range, or a fractional value.

Example:

meter { value: "0.6", min: "0", max: "1", low: "0.25", high: "0.75", optimum: "0.5" } ""

Common attributes:

| Name | Type | Example | Description | |-------------|--------|-----------|-------------| | value | String | "0.6" | Current value of the measurement | | min | String | "0" | Minimum limit of the range | | max | String | "1" | Maximum limit of the range | | low | String | "0.25" | Low end of the "good" part of the range | | high | String | "0.75" | High end of the "good" part of the range | | optimum | String | "0.5" | Optimum value in the range |

Re-exports from Yoga.React.DOM.HTML.Nav

#nav Source

nav :: FFIComponent BaseAttributes

The <nav> HTML element represents a section of a page whose purpose is to provide navigation links.

Example:

nav { className: "mainNav" }
  [ ul {}
      [ li {} $ a { href: "#section1" } "Section 1"
      , li {} $ a { href: "#section2" } "Section 2"
      ]
  ]

Re-exports from Yoga.React.DOM.HTML.NoScript

#noscript Source

noscript :: FFIComponent BaseAttributes

The <noscript> tag in HTML, used to provide an alternative content for users that have disabled scripts in their browser or have a browser that doesn't support script.

Example:

noscript {}
  "Your browser does not support JavaScript!"

Common attributes:

No standard attributes.

Re-exports from Yoga.React.DOM.HTML.Object

#object Source

object :: FFIComponent ObjectAttributes

The <object> HTML element is used to embed content from an external application or interactive content (including images, audio and video). Among the possible reasons for using object to embed an image, the most practical is that it allows the fallback content to contain HTML markup, such as headings, lists, tables, and phrase markup. The img element lets you specify only plain text as fallback content—even paragraph breaks cannot be specified.

Example:

object { data: "image.svg", type: "image/svg+xml" } "Your browser does not support SVG."

Common attributes:

| Name | Type | Description | |-----------------|---------|------------------------------------| | data | String | URL of the embedded content | | type | String | Media type of the embedded content |

Re-exports from Yoga.React.DOM.HTML.Ol

#ol Source

ol :: FFIComponent OlAttributes

The <ol> tag in HTML, represents an ordered list of items — typically rendered as a numbered list.

Example:

ol { className: "element-list" } [ li { } "Item 1", li { } "Item 2" ]

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | start | Number | 5 | Defines the start number of the ordered list. | | type | String | "1" | Defines the type of numbering that should be used.

Re-exports from Yoga.React.DOM.HTML.Optgroup

#optgroup Source

optgroup :: FFIComponent OptgroupAttributes

Re-exports from Yoga.React.DOM.HTML.Option

#option Source

option :: FFIComponent OptionAttributes

The <optgroup> HTML element creates a grouping of options within a <select> element.

Example:

optgroup { label: "Group 1" } "Options go here."

Common attributes:

| Name | Type | Example | Description | |-----------------|--------|---------------|------------------------------------| | label | String | "Group 1" | Label for the option group |

Re-exports from Yoga.React.DOM.HTML.Output

#output Source

output :: FFIComponent BaseAttributes

The <output> HTML element represents the result of a calculation or user action.

Example:

output {} "Result goes here."

Re-exports from Yoga.React.DOM.HTML.P

#p Source

p :: FFIComponent BaseAttributes

The <p> HTML element represents a paragraph.

Example:

p {} "This is a paragraph."

Re-exports from Yoga.React.DOM.HTML.Param

#param Source

param :: FFIComponent_ ParamAttributes

The <param> HTML element defines parameters for plugins invoked by <object> elements.

Example:

param { name: "autoplay", value: "true" }

Common attributes:

| Name | Type | Example | Description | |------|------|---------|-------------| | name | String | "autoplay" | Name of the parameter | | value | String | "true" | Value of the parameter |

Re-exports from Yoga.React.DOM.HTML.Picture

#picture Source

picture :: FFIComponent BaseAttributes

The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display scenarios.

Example:

picture {}
  [ source { srcset: "large.jpg", media: "(min-width: 800px)" }
  , source { srcset: "medium.jpg", media: "(min-width: 600px)" }
  , img { src: "small.jpg", alt: "Description of the image" }
  ]-- | ```

Re-exports from Yoga.React.DOM.HTML.Pre

#pre Source

pre :: FFIComponent BaseAttributes

The <pre> HTML element represents preformatted text, in which structure is represented by typographic conventions rather than by the elements.

Example:

pre {} " Preformatted text goes here. "

Common attributes:

| Name | Type | Example | Description | |------|------|---------|-------------| | className | String | "codeBlock" | CSS class of the element |

Re-exports from Yoga.React.DOM.HTML.Progress

#progress Source

progress :: FFIComponent ProgressAttributes

The <progress> HTML element represents the completion progress of a task.

Example:

progress { value: "70", max: "100" } ""

Common attributes:

| Name | Type | Example | Description | |------|------|---------|-------------| | value | String | "70" | Current value of the progress | | max | String | "100" | Maximum value of the progress |

Re-exports from Yoga.React.DOM.HTML.Q

#q Source

q :: FFIComponent BaseAttributes

The <q> HTML element indicates that the enclosed text is a short inline quotation.

Example:

q {} "This is a quote."

Re-exports from Yoga.React.DOM.HTML.Rp

#rp Source

rp :: FFIComponent BaseAttributes

The <rp> HTML element is used to provide fallback parentheses for browsers that do not support display of ruby annotations using the <ruby> element.

Example:

rp {} "(fallback content)"

Re-exports from Yoga.React.DOM.HTML.Rt

#rt Source

rt :: FFIComponent BaseAttributes

The <rt> HTML element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography.

Example:

rt {} "Pronunciation goes here."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|---------------|-------------| | className | String | "rubyText" | CSS class of the element |

Re-exports from Yoga.React.DOM.HTML.Ruby

#ruby Source

ruby :: FFIComponent BaseAttributes

The <ruby> HTML element represents a ruby annotation. Ruby annotations are for showing pronunciation of East Asian characters.

Example:

ruby {} "Ruby annotation goes here."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|---------------|-------------| | className | String | "rubyAnnotation" | CSS class of the element |

Re-exports from Yoga.React.DOM.HTML.S

#s Source

s :: FFIComponent BaseAttributes

The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate.

Example:

s {} "This text is no longer accurate."

Re-exports from Yoga.React.DOM.HTML.Samp

#samp Source

samp :: FFIComponent BaseAttributes

The <samp> HTML element is used to display sample output from a computer program.

Example:

samp {} "Program output goes here"

Re-exports from Yoga.React.DOM.HTML.Script

#scriptInline Source

scriptInline :: FFIRawTextComponent ScriptAttributes

The <script> HTML element is used to embed executable code or data; this is typically used to embed JavaScript code.

Example:

scriptInline { type: "text/javascript" } "jQuery('body').append('<p>Hello World!</p>');"

#script Source

script :: FFIComponent_ ScriptAttributes

The <script> HTML element is used to embed executable code or data; this is typically used to refer to JavaScript code. See scriptInline for scripts that don't just reference a file.

Example:

script { src: "script.js", crossOrigin: true, type: "text/javascript" }
-- or

Re-exports from Yoga.React.DOM.HTML.Section

#section Source

section :: FFIComponent BaseAttributes

The <section> HTML element represents a standalone section of functionality contained within an HTML document, typically with a heading, ...

Example:

section {} "Section content goes here."

Re-exports from Yoga.React.DOM.HTML.Select

#select Source

select :: FFIComponent SelectAttributes

The <select> HTML element represents a control that provides a menu of options.

Example:

select { value, onChange }
  [ option { value: "" } "Select an option"
  , option { value: "option1" } "Option 1"
  , option { value: "option2" } "Option 2"
  ]

Re-exports from Yoga.React.DOM.HTML.Small

#small Source

small :: FFIComponent BaseAttributes

The <small> HTML element represents side comments such as small print.

Example:

small {} "Small print text goes here."

Re-exports from Yoga.React.DOM.HTML.Source

#source Source

source :: FFIComponent_ SourceAttributes

The <source> HTML element is used to specify multiple media resources for media elements, such as <picture>, <audio>, and <video>.

Example:

picture {}
  [ source { srcset: "image-large.jpg", media: "(min-width: 800px)", type: "image/jpeg" }
  , source { srcset: "image-medium.jpg", media: "(min-width: 600px)", type: "image/jpeg" }
  , img { src: "image-small.jpg", alt: "Description" }
  ]

Common attributes:

| Name | Type | Example | Description | |-----------------|--------|-------------|-----------------------------------------| | src | String | "audio.ogg" | URL of the media file or stream | | type | String | "audio/ogg" | Type of the media file or stream | | media | String | "(min-width: 600px)" | Media query of the media resource | | srcset | String | "image-1x.jpg 1x, image-2x.jpg 2x" | Image source set for <picture> |

Re-exports from Yoga.React.DOM.HTML.Span

#span Source

span :: FFIComponent BaseAttributes

The <span> tag in HTML is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values.

Example:

span { id: "highlight", className: "note" } "This is a note"

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | id | String | "highlight" | The unique identifier of the span. | | className | String | "note" | The class of the span for applying CSS styles. | | data-* | String | "custom-data" | Stores custom data private to the page or application. | | aria-* | String | "aria-labelledby" | Defines accessibility-related attributes. |

Re-exports from Yoga.React.DOM.HTML.Strong

#strong Source

strong :: FFIComponent BaseAttributes

The <strong> HTML element gives text strong importance, and is typically displayed in bold.

Example:

strong {} "Important text goes here."

Re-exports from Yoga.React.DOM.HTML.Style

#style Source

style :: FFIRawTextComponent StyleAttributes

The <style> HTML element contains style information for a document, or part of a document. The child must be a string

Example:

style { type: "text/css" } "body { background-color: #f0f0f2; }"

Re-exports from Yoga.React.DOM.HTML.Sub

#sub Source

sub :: FFIComponent BaseAttributes

The <sub> HTML element specifies inline text which should be displayed as subscript for solely typographical reasons.

Example:

sub {} "Subscript text goes here."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|-------------|-------------| | className | String | "subText" | CSS class of the element |

Re-exports from Yoga.React.DOM.HTML.Summary

#summary Source

summary :: FFIComponent SummaryProps

The <summary> HTML element is used as a summary, caption, or legend for the content of a <details> element.

Example:

details {}
  [ summary {} "Summary text goes here."
  , text "The long version of the details goes here."
  ]

Re-exports from Yoga.React.DOM.HTML.Sup

#sup Source

sup :: FFIComponent BaseAttributes

The <sup> HTML element specifies a span of inline text to be displayed at a higher vertical position relative to the text around it for typographical reasons.

Example:

-- E=mc²
[ text "E=mc", sup {} "2" ]

Re-exports from Yoga.React.DOM.HTML.Table

#table Source

table :: FFIComponent BaseAttributes

The <table> HTML element represents data in two dimensions or more.

Example:

table {}
  [ thead {}
    [ tr {} [ th {} "Header No. 1", th {} "Header No. 2" ]
  , tbody {}
    [ tr {} [ td {} "Row 1, Col 1", td {} "Row 1, Col 2" ]
    , tr {} [ td {} "Row 2, Col 1", td {} "Row 2, Col 2" ]
    ]
  ]

| Header No. 1 | Header No. 2 | | --- | --- | | Row 1, Col 1 | Row 1, Col 2 | | Row 2, Col 1 | Row 2, Col 2 |

Re-exports from Yoga.React.DOM.HTML.Tbody

#tbody Source

tbody :: FFIComponent BaseAttributes

The <tbody> HTML element groups the body content in a table.

Example:

| <p></p> | <p></p> | | --- | --- | | ↖ | ↗ | | ↙ | ↘ |

tbody {}
  [ tr {} [ td {} "↖", td {} "↗" ]
  , tr {} [ td {} "↙", td {} "↘" ]
  ]

Re-exports from Yoga.React.DOM.HTML.Td

#td Source

td :: FFIComponent BaseAttributes

The <td> HTML element standard cell in a table. It can be filled with data.

Example:

td {} "Finally the content of the cell"

Re-exports from Yoga.React.DOM.HTML.Template

#template Source

template :: FFIComponent BaseAttributes

The <template> HTML element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime. You probably don't want this when using React.

Example:

template { } "Template content goes here."

Common attributes:

| Name | Type | Example | Description | |---------|--------|-------------|-------------| | className | String | "templateClass" | CSS class of the element |

Re-exports from Yoga.React.DOM.HTML.Textarea

#textarea Source

textarea :: FFIComponent_ TextareaAttributes

The <textarea> HTML element represents a multi-line plain-text editing control.

Example:

textarea { rows: 5, cols: 50, value, onChange }

Common attributes:

| Name | Type | Example | Description | |---------|--------|------------------|-------------| | cols | Int | 50 | Specifies the visible width | | rows | Int | 5 | Specifies the visible number of lines |

Re-exports from Yoga.React.DOM.HTML.Tfoot

#tfoot Source

tfoot :: FFIComponent BaseAttributes

The <tfoot> HTML element a set of rows summarizing the columns of the table. It is a direct child of the <table> element.

Example:

table {}
  [ thead {} [ tr {} [ th {} "Item", th {} "Price" ] ]
  , tbody {}
      [ tr {} [ td {} "Apples", td {} "£10" ]
      , tr {} [ td {} "Oranges", td {} "£12" ]
      ]
  , tfoot {} [ tr {} [ th {} "Total", td {} "£22" ]
  ]

Re-exports from Yoga.React.DOM.HTML.Th

#th Source

th :: FFIComponent BaseAttributes

The <th> HTML element defines a cell as header of a group of cells. The exact nature of this group depends on the context.

Example:

th {} "Name"

Re-exports from Yoga.React.DOM.HTML.Thead

#thead Source

thead :: FFIComponent BaseAttributes

The <thead> HTML element groups the header content in a table.

Example:

thead {} [ tr {} [ th {} "First Name", th {} "Last Name" ] ]

Re-exports from Yoga.React.DOM.HTML.Time

#time Source

time :: FFIComponent TimeAttributes

The <time> HTML element represents a specific period in time.

Example:

time { datetime: "2024-02-14" } "Valentine's Day"

Common attributes:

| Name | Type | Example | Description | |-------------|--------|-------------|-------------| | datetime | String | "2008-02-14" | Machine-readable equivalent of the time |

Re-exports from Yoga.React.DOM.HTML.Title

#title Source

title :: String -> JSX

The <title> tag in HTML, it defines the title of the HTML document, which is shown in a browser's title bar or a page's tab.

Example:

title "Page Title"

The <title> tag must be placed within the <head> tag. Note: The <title> tag does not have specific attributes, it only contains text representing the document title.

Re-exports from Yoga.React.DOM.HTML.Tr

#tr Source

tr :: FFIComponent BaseAttributes

The <tr> HTML element defines a row of cells in a table. Those can be a mix of <td> and <th> elements.

Example:

tr {} [ th {} [ text "Cell 1" ], td {} [ text "Cell 2" ] ]

Re-exports from Yoga.React.DOM.HTML.Track

#track Source

track :: FFIComponent_ TrackAttributes

The <track> HTML element is used as a child of the media elements—<audio>, <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles.

Example:

track { kind: "subtitles", src: "subs_eng.srt", srcLang: "en" }

Common attributes:

| Name | Type | Example | Description | |---------|--------|-------------|-------------| | kind | String | "subtitles" | Kind of text track | | src | String | "subs_eng.srt" | URL of the track file | | srcLang | String | "en" | Language of the track text data |

Re-exports from Yoga.React.DOM.HTML.U

#u Source

u :: FFIComponent BaseAttributes

The <u> HTML element represents an unarticulated annotation. In most languages, this would not change the meaning of the sentence -- it's just a stylistic choice to underline.

Example:

u {} "Underlined text goes here."

Re-exports from Yoga.React.DOM.HTML.Ul

#ul Source

ul :: FFIComponent BaseAttributes

The <ul> tag in HTML, represents an unordered list of items, typically rendered as a bulleted list.

Example:

ul { className: "element-list" } [ li { } "Item 1", li { } "Item 2" ]

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | className | String | "element-list" | The class of the ul for applying CSS styles. | | data-* | String | "custom-data" | Stores custom data private to the page or application. | | aria-* | String | "aria-labelledby" | Defines accessibility-related attributes. |

Re-exports from Yoga.React.DOM.HTML.Var

#var Source

var :: FFIComponent BaseAttributes

The <var> HTML element represents the name of a variable in a mathematical expression or a programming context.

Example:

var { } "threehalfs"

Re-exports from Yoga.React.DOM.HTML.Video

#video Source

video :: FFIComponent VideoAttributes

The <video> HTML element embeds a media player which supports video playback into the document.

Example:

video { src: "video.mp4", width: 320, height: 240 } "Video content or text displayed if video cannot be played."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|---------------|-------------| | src | String | "video.mp4" | The URL of the video to embed | | width | Int | 320 | The width of the video player | | height | Int | 240 | The height of the video player |

Re-exports from Yoga.React.DOM.HTML.Wbr

#wbr Source

wbr :: FFIComponent_ BaseAttributes

The <wbr> HTML element represents a word break opportunity—a position within text where the browser may optionally break a line.

Example:

[ text "Super", wbr {}, text "Califragilisticexpialidocious" ]

Modules: Yoga.React.DOM; Yoga.React.DOM.Attributes; Yoga.React.DOM.Attributes.AutoCapitalize; Yoga.React.DOM.Attributes.Dir; Yoga.React.DOM.Attributes.InputMode; Yoga.React.DOM.Attributes.Target; Yoga.React.DOM.Attributes.YesOrNo; Yoga.React.DOM.Client; Yoga.React.DOM.Event; Yoga.React.DOM.HTML; Yoga.React.DOM.HTML.A; Yoga.React.DOM.HTML.Abbr; Yoga.React.DOM.HTML.Address; Yoga.React.DOM.HTML.Area; Yoga.React.DOM.HTML.Article; Yoga.React.DOM.HTML.Aside; Yoga.React.DOM.HTML.Audio; Yoga.React.DOM.HTML.B; Yoga.React.DOM.HTML.Base; Yoga.React.DOM.HTML.Bdi; Yoga.React.DOM.HTML.Bdo; Yoga.React.DOM.HTML.Blockquote; Yoga.React.DOM.HTML.Body; Yoga.React.DOM.HTML.Br; Yoga.React.DOM.HTML.Button; Yoga.React.DOM.HTML.Canvas; Yoga.React.DOM.HTML.Caption; Yoga.React.DOM.HTML.Cite; Yoga.React.DOM.HTML.Code; Yoga.React.DOM.HTML.Col; Yoga.React.DOM.HTML.ColGroup; Yoga.React.DOM.HTML.Data; Yoga.React.DOM.HTML.DataList; Yoga.React.DOM.HTML.Dd; Yoga.React.DOM.HTML.Del; Yoga.React.DOM.HTML.Details; Yoga.React.DOM.HTML.Dfn; Yoga.React.DOM.HTML.Dialog; Yoga.React.DOM.HTML.Div; Yoga.React.DOM.HTML.Dl; Yoga.React.DOM.HTML.Dt; Yoga.React.DOM.HTML.Em; Yoga.React.DOM.HTML.Embed; Yoga.React.DOM.HTML.FieldSet; Yoga.React.DOM.HTML.Figcaption; Yoga.React.DOM.HTML.Figure; Yoga.React.DOM.HTML.Footer; Yoga.React.DOM.HTML.Form; Yoga.React.DOM.HTML.H; Yoga.React.DOM.HTML.HTML; Yoga.React.DOM.HTML.Head; Yoga.React.DOM.HTML.Header; Yoga.React.DOM.HTML.Hr; Yoga.React.DOM.HTML.I; Yoga.React.DOM.HTML.IFrame; Yoga.React.DOM.HTML.Img; Yoga.React.DOM.HTML.Input; Yoga.React.DOM.HTML.Kbd; Yoga.React.DOM.HTML.Label; Yoga.React.DOM.HTML.Legend; Yoga.React.DOM.HTML.Li; Yoga.React.DOM.HTML.Link; Yoga.React.DOM.HTML.Main; Yoga.React.DOM.HTML.Map; Yoga.React.DOM.HTML.Mark; Yoga.React.DOM.HTML.Menu; Yoga.React.DOM.HTML.Meta; Yoga.React.DOM.HTML.Meter; Yoga.React.DOM.HTML.Nav; Yoga.React.DOM.HTML.NoScript; Yoga.React.DOM.HTML.Object; Yoga.React.DOM.HTML.Ol; Yoga.React.DOM.HTML.Optgroup; Yoga.React.DOM.HTML.Option; Yoga.React.DOM.HTML.Output; Yoga.React.DOM.HTML.P; Yoga.React.DOM.HTML.Param; Yoga.React.DOM.HTML.Picture; Yoga.React.DOM.HTML.Pre; Yoga.React.DOM.HTML.Progress; Yoga.React.DOM.HTML.Q; Yoga.React.DOM.HTML.Rp; Yoga.React.DOM.HTML.Rt; Yoga.React.DOM.HTML.Ruby; Yoga.React.DOM.HTML.S; Yoga.React.DOM.HTML.Samp; Yoga.React.DOM.HTML.Script; Yoga.React.DOM.HTML.Section; Yoga.React.DOM.HTML.Select; Yoga.React.DOM.HTML.Small; Yoga.React.DOM.HTML.Source; Yoga.React.DOM.HTML.Span; Yoga.React.DOM.HTML.Strong; Yoga.React.DOM.HTML.Style; Yoga.React.DOM.HTML.Sub; Yoga.React.DOM.HTML.Summary; Yoga.React.DOM.HTML.Sup; Yoga.React.DOM.HTML.Table; Yoga.React.DOM.HTML.Tbody; Yoga.React.DOM.HTML.Td; Yoga.React.DOM.HTML.Template; Yoga.React.DOM.HTML.Textarea; Yoga.React.DOM.HTML.Tfoot; Yoga.React.DOM.HTML.Th; Yoga.React.DOM.HTML.Thead; Yoga.React.DOM.HTML.Time; Yoga.React.DOM.HTML.Title; Yoga.React.DOM.HTML.Tr; Yoga.React.DOM.HTML.Track; Yoga.React.DOM.HTML.U; Yoga.React.DOM.HTML.Ul; Yoga.React.DOM.HTML.Var; Yoga.React.DOM.HTML.Video; Yoga.React.DOM.HTML.Wbr; Yoga.React.DOM.Handler; Yoga.React.DOM.Internal; Yoga.React.DOM.Server