---
title: "Cards"
slug: "cards"
category: "Mini Widgets"
hosts: "ninox"
---

# Cards

## AI Defaults (read first)

- **Function name**: `arcCustomCard`.
- **uniqueId**: Required when using actions, e.g. `"card-" + Nr`.
- **title**, **subtitle**, **value**: Main content properties.
- **Use inside arcCustomLayout blocks**: Set `clickAction` on the block, not the card, for navigation.
- **No `else "" end`**: Omit else branches for optional content.

# Custom Cards

Die Custom Cards kannst du entweder einzeln in Formel-Felder verwenden oder in komplexere Oberflächen mit[ Custom Layout ](/documentation/custom-layout)integrieren. Der Vorteil bei dem Layout ist der, dass du die Card innerhalb der Blocks klickbar machen kannst und so auf andere Tabellen, bzw. Datensätze verlinken kannst.

<iframe src="https://www.youtube.com/embed/uxDppTcWZjE?iv_load_policy=3&rel=0&modestbranding=1&playsinline=1&autoplay=1&mute=1" data-thumbnail="Medium Quality" frameborder="0" allow="presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>## Anwendungscode


```javascript
let data := {
        uniqueId: "",
        width: "",
        height: "",
        borderRadius: "",
        icon: arcCustomIcon({
                name: "",
                containerSize: "",
                borderSize: "",
                borderColor: "",
                iconSize: "",
                borderRadius: "",
                color: "",
                backgroundColor: "",
            }),
        borderColor: "",
        borderWidth: "",
        backgroundColor:",
        paddingY: "",
        paddingX: "",
        title: "",
        value: ""
    };
arcCustomCard(data)
```

## Erklärung einzelner Parameter

***width*** gibt die Breite deiner Card an.


```javascript
width: "100%", // 100% füllt die gesamte Breite des Formelfeldes aus.
width: "200px", // Pixel-Wert definiert fixe Breite
```

***height*** definiert die Höhe der Karte.


```javascript
height: "100%", // 100% füllt die gesamte Höhe des Formelfeldes aus.
height: "200px", // Pixel-Wert definiert fixe Höhe
```

***borderRadius*** definiert die Abrundungen der Ecken.


```javascript
borderRadius: "15px",
```

***icon*** wird in der Karte oben links dargestellt. Dieses kannst du ausgeben, musst du aber nicht. Ein Icon kannst du mit dem [Mini-Widget customIcon](/documentation/custom-icon) definieren. Hier kannst du nur das Icon ausgeben lassen oder auch mit Hintergrundfarben arbeiten.


```javascript
icon: arcCustomIcon({
                name: "",
                containerSize: "",
                borderSize: "",
                borderColor: "",
                iconSize: "",
                borderRadius: "",
                color: "",
                backgroundColor: ""
            })
```

***title*** definiert den Titel und deiner Karte.


```javascript
title: "Mitarbeiter", // Text in "
title: Mitarbeiter.Name, // Ninox-Refrenz-Feld in Text Form
```

***value*** definiert den Body deiner Karte. Hier kannst du entweder mit text arbeiten oder aber andere Mini-Widgets verwenden, wie etwa [eine Progress Bar](/documentation/progress-bar).


```javascript
value: "Subtitel", // Text in "
value: Mitarbeiter.Info // Ninox-Refrenz-Feld in Text Form
value: arcCustomProgressBar({
        uniqueId: "",
        width: "",
        fontSize: "",
        fontColor: "",
        backgroundColor: "",
        progressColor: "",
        valueTotal: "",
        valueProgress: "",
        valueText: ""
    }), // Andere Widgets oder Mini-Widgets einsetzen

```

## Standard Werte als Fallback

![](https://framerusercontent.com/images/Qk8oDQFM0sGgNWLRGHjWMzkbw.png)


```javascript
let data := {
        uniqueId: "",
        width: "", // Fallback: 100%
        height: "", // Fallback: auto
        borderRadius: "", // Fallback: 15px
        icon: "",
        title: "Titel",
        value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
    };
arcCustomCard(data)
```