---
title: "regular card · RUAL Documentation"
description: "Shows a regular card."
canonical: https://docs.rual.nl/block-types/state%20ui/state_card
language: en
---

# regular card

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).

Shows a regular card.

- title required `value` The title shown within this card.

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

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

- title icon `value` The icon shown next to the title.

- sub_title `value` The subtitle shown within this card.

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

- toolbar `state` Content to be shown within the headers right-side.

- body required `state` Body to be shown within this card.

- footer `state` Footer to be shown within this card. If no footer given, the footer part will be hidden.

- 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.

| `panel` |
| --- |

A typical wiring for [regular card](https://docs.rual.nl/block-types/state%2520ui/state_card): [value](https://docs.rual.nl/block-types/value/value_default) feeds the `title` pin; the `state` out pin feeds [get component child](https://docs.rual.nl/block-types/state%2520actions/state_component_get_child).

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

### 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