`text` element

Headings, paragraphs, labels, quotes and formatted values — literal or bound to data.

Renders

h1–h6, p, small, span, blockquote or pre depending on variant (class iwc-text-<variant>)

Required

content or bind.

Native apps

Compiled native apps and server-driven apps

Syntax

text element

{ "type": "text" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Default	Description
`content`	`string`	—	literal text, or an expression starting with = ("=product.name")
`bind`	`string`	—	take content from data: a field of the current item, or props.x, user.x, params.x, state.store.path
`variant`	`string`	`paragraph`	text: heading, h1-h6, subheading, paragraph, caption, label, quote, code; button: primary, secondary, ghost
`format`	`"text""number""currency""percent""date""datetime""date-long""date-short""time""markdown"`	—	markdown (text elements): the value is user-written Markdown, rendered safely (no HTML passes through)
`currency`	`string`	—	ISO currency for format=currency
`prefix`	`string`	—
`suffix`	`string`	—
`tag`	`"div""span""p""section""article""aside""header""footer""nav""main""figure""figcaption""ul""ol""li""dl""dt""dd""blockquote""address""time""small""strong""em""b""i""s""u""mark""cite""q""abbr""sub""sup""del""ins""code""pre""kbd""label""hgroup""h1""h2""h3""h4""h5""h6""details""summary""button"`	—	the HTML tag a container or text element renders as, e.g. "ul", "li", "article", "figure"

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

text example

{
  "type": "column",
  "elements": [
    { "type": "text", "variant": "h1", "content": "Hello" },
    { "type": "text", "content": "Line breaks\nare kept; HTML is <escaped>." },
    {
      "type": "text",
      "variant": "subheading",
      "content": "=1299.5",
      "format": "currency",
      "currency": "INR",
      "prefix": "From "
    }
  ]
}

Variants: title→h1, h1…h6, heading→h2, subheading→h3, paragraph→p (default), caption→small, label→span, span, eyebrow→p, quote→blockquote, code→pre. format: "markdown" renders user-written Markdown safely (no HTML passes through). content starting with = is an expression.

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <div class="iwc-column i807b63fc">
    <h1 class="iwc-text i1678495b iwc-text-h1">
      Hello
    </h1>
    <p class="iwc-text if2d6d79a">
      Line breaks are kept; HTML is &lt;escaped&gt;.
    </p>
    <h3 class="iwc-text icf3aea53 iwc-text-subheading">
      From ₹1,299.50
    </h3>
  </div>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.