---
url: /card-guides/component-basics.md
description: >-
  Components are the building blocks of Cards, there are 20 different components
  found in the component library.
---

# Components

Components are the building blocks of Cards, there are 20 different components found in the component library. Components are selected within the component library and drag and dropped into the edit panel. Once a component is in the edit panel, it can then be customised by interacting with the properties section.

## The Card Designer interface

![Fig. 1. The Card Designer interface, annotated to show the Components library, Card Content, the Context and Variables panels, Properties, Preview and the Error Console](/card-guides/card-editor-overview.png)

**Fig. 1. Card Designer Interface**

| Panel | Purpose |
| :--- | :--- |
| **Components** | The component library, plus **Prefabs**. Search with `Ctrl K`. |
| **Card Content** | The editing canvas, where components are arranged. |
| **Context & Variables** | The dimension/element context the card renders against, and its variables. |
| **Properties** | Properties of the currently selected component. |
| **Preview** | The card as an end user sees it. |
| **Error Console** | Errors raised while rendering. |

## Adding a component

Components are dragged from the library onto the canvas. The drop target is highlighted as you drag, and the component is inserted where you release it.

![A Text component being dragged from the library to a drop target on the canvas, and the result after it is added](/card-guides/text-component-annotated.png)

Indentation on the canvas is the structural relationship between components - a component indented under another is nested inside it.

![The canvas showing one component nested inside another, with indentation indicating the structural relationship](/card-guides/nested-component-annotated.png)

## Component Properties

Every Component has a range of properties that can be edited and adjusted to suit the desired function and look of your card. The properties are accessible in the Selected Component Properties Panel (the **Properties** panel of Fig. 1 above).

Properties are grouped - **Other**, **Styling**, **Interactivity**, **Layout** - and editable either by typing directly in the corresponding input box or by clicking the formula icon on the right to enter a formula.

![The Properties panel, annotated to show the formula input icons and the Styling and Layout property groups](/card-guides/properties-panel-annotated.png)

When a property is changed, there are two ways this will be shown- in the card preview itself (you may have to click the ‘Preview’ button to refresh these changes), and in the Selected Component Properties panel. The changed property in the Selected Components Property panel will either:

Contain the change visibly in the corresponding property’s input box
Have the input box grayed and unable to be typed into (this indicates that the property has been changed using a formula - it is editable again by clicking the small calculator icon)

### Driving a property with a formula

Clicking a property's formula icon opens the **Apply Formula** editor. The formula is evaluated when the card renders, so a property can respond to the card's context rather than being fixed.

![The Apply Formula editor, showing a formula built from ELEMENT calls and a Default Value, with the resulting text rendered in the card preview](/card-guides/text-component-detail-annotated.png)

Formulas concatenate with `&`, and [`ELEMENT`](/cube-functions/element) reads the current context - so a heading can name what it's showing:

```
ELEMENT("Year") & " Months breakdown: " & ELEMENT("Account")
```

renders as `FY2021 Months breakdown: 800 - Profit`, and changes automatically when the card's context changes.

**Default Value** is what the property falls back to if the formula can't resolve, and **Remove** clears the formula and returns the property to direct entry.

## Generic Properties

While all components have some unique properties, there are also generic properties shared universally among most components.

### Name

The name field is used with some components to help identify it on the card designer.

### Align Content

Align content allows you to align the elements inside the component to the right, left or center of the component’s bounds.

### Margins

Margins are used to adjust the position and/or spacing of a component, measured in pixels. For example, if you would like to move a component downwards, you would give it a higher value on Margin Top. You can also use negative values.

### Padding

Padding is the internal spacing of a component. Below is a visual distinction between padding and margin, with the component being the blue block in the image.

### Custom Style

Custom Style lets you attach a reusable, CSS-based style (built in the [Style Editor](/card-guides/styles), and shared across every card in the model) to a component. It's an advanced feature intended for styling beyond what the standard properties above cover.