---
title: "h1 · RUAL Documentation"
description: "A H1 element."
canonical: https://docs.rual.nl/block-types/state%20ui/state_h1
language: en
---

# h1

This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v13.0.6`](https://docs.rual.nl/core-versions/130006).

A H1 element.

- Content required `state` Integrates content or data from other elements. • Hidden when other fields are filled

- Text required `value` The text of the h1 element. • Hidden when other fields are filled

- class `uiclass` Assigns a CSS class to the element. • Hidden when unused

- style `uistyle` Applies inline CSS style to the element • Hidden when unused

- attributes `uiattributes` Adds custom attributes to the element. • Hidden when unused

- state `state` Returns the element to the frontend state.

| `h1` |
| --- |
| `header 1` |

A typical wiring for [h1](https://docs.rual.nl/block-types/state%2520ui/state_h1): [translate key](https://docs.rual.nl/block-types/translations/state_translate_key) feeds the `content` pin; [multiple](https://docs.rual.nl/block-types/styling/uistyle_multiple) feeds the `uistyle` pin; [translate key](https://docs.rual.nl/block-types/translations/value_translate_key) feeds the `text` pin; the `state` out pin feeds [container](https://docs.rual.nl/block-types/state%2520ui/state_container).

![Studio canvas example for the h1 block: typical wiring for h1.](https://docs.rual.nl/canvas-examples/state_h1.png)

### Commonly used with

In production blueprints, this block is most often wired together with:

- [container](https://docs.rual.nl/block-types/state%20ui/state_container): this block feeds into it. A div with the class container on it by default.

- [translate key](https://docs.rual.nl/block-types/translations/state_translate_key): feeds into this block. Translates a given key and builds DOM nodes from the HTML within these keys.

- [div](https://docs.rual.nl/block-types/state%20ui/state_div): this block feeds into it. Creates a dynamic and customizable div element on your web page.

- [custom text](https://docs.rual.nl/block-types/state%20ui/state_text): feeds into this block.

- [multiple](https://docs.rual.nl/block-types/styling/uistyle_multiple): feeds into this block. Multiple styling.

- [translate key](https://docs.rual.nl/block-types/translations/value_translate_key): feeds into this block. Translates a given key.

### Used in these guides

These documentation pages use or explain this block:

- [Quickstart](https://docs.rual.nl/getting-started/quickstart)

### Version history

Introduced in [`v13.0.1`](https://docs.rual.nl/core-versions/130001).

Last modified in [`v13.0.6`](https://docs.rual.nl/core-versions/130006).

- [Back to `state ui`](https://docs.rual.nl/block-types/state%20ui): Return to the main group to view all sub-groups

- [Back to `state elements`](https://docs.rual.nl/block-types/state%20ui?group=state%20elements): Return to the group to view all blocks within this group