`footer` element

Closing content: links, legal text, contact details.

Renders

<footer>

Required

Nothing beyond type.

Native apps

Compiled native apps and server-driven apps

Syntax

footer element

{ "type": "footer" }

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

Properties

Property	Type	Description
`elements`	`array of element`
`layout`	`object`	`align`: `"start" \| "center" \| "end" \| "stretch" \| "baseline"` `direction`: `"row" \| "column" \| "row-reverse" \| "column-reverse"` `gap`: `string` `justify`: `"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"` `wrap`: `boolean`
`gap`	`string`
`content`	`string`	literal text, or an expression starting with = ("=product.name")
`columns`	`integer (1–24)string`
`responsiveColumns`	`object {name: integer (1–24)}`	grid columns per breakpoint

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

Example

footer example

{
  "type": "footer",
  "className": "site-footer",
  "elements": [
    { "type": "text", "variant": "caption", "content": "© Lumen & Oak · Made in Jaipur" }
  ]
}

Server-driven native apps leave footers out by default (they are a web convention); list platforms including android/ios to keep one.

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">
  <footer class="iwc-footer ib3462e5f site-footer" data-iwc-web-only>
    <small class="iwc-text ib906bb5e iwc-text-caption">© Lumen &amp; Oak · Made in Jaipur</small>
  </footer>
</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.