# Card

## Overview

A Card is used as a container for a set of different components. It supports multiple views that can be activated by switching the *Enable multiple views* option in the Card's settings.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FmArz5XmTLPRUdETwHwZo%2FCleanShot%202025-07-21%20at%2014.19.37%402x-min.png?alt=media&#x26;token=dd9aa041-7b57-4bb8-b718-a5e5d1206b66" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="192.0390625">Name</th><th width="167.45703125">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>views</code></td><td><code>string[]</code></td><td>Array of available view names</td></tr><tr><td><code>selectedView</code></td><td><code>any</code></td><td>Name of the selected view</td></tr><tr><td><code>value</code></td><td><code>value</code></td><td>Current component value</td></tr><tr><td><code>children</code></td><td><code>children</code></td><td>The children of the card</td></tr><tr><td><code>valid</code></td><td><code>boolean</code></td><td>Indicates if the component is valid</td></tr></tbody></table>

{% hint style="info" %}
All nested inputs are included in the component’s `value` property allowing you to build custom forms.
{% endhint %}

### Methods

<table><thead><tr><th width="162.625">Name</th><th width="148.0546875">Parameters</th><th width="102.546875">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>selectView</code></td><td><code>name: string</code></td><td><code>void</code></td><td>Select a view by name</td></tr><tr><td><code>setValue</code></td><td><code>data: object</code></td><td><code>void</code></td><td>Set component data</td></tr><tr><td><code>resetValue</code></td><td>–</td><td><code>void</code></td><td>Reset component to the initial value</td></tr><tr><td><code>validate</code></td><td>–</td><td><code>void</code></td><td>Trigger form validation</td></tr><tr><td><code>resetValidation</code></td><td>–</td><td><code>void</code></td><td>Clear validation errors</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="144.36328125">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Click</strong></td><td>Triggered when the component is clicked</td></tr><tr><td><strong>On Double Click</strong></td><td>Triggered when the component is double-clicked</td></tr><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr></tbody></table>

## Working with the component

The Card component is a useful tool in cases when you have several components on the page and you want them to occupy all available space - you can place them inside the Card and use our *Expand content to fit* setting.\
More details you can find in this article:point\_down:

{% content-ref url="../../concepts/components/work-with-components/expand-component-to-fill-screen-container" %}
[expand-component-to-fill-screen-container](https://docs.uibakery.io/concepts/components/work-with-components/expand-component-to-fill-screen-container)
{% endcontent-ref %}