# How to configure Card Compact Layout

Go to "**Layout**" section of card properties at the right sidebar. Select **Compact Layout** and click on link "create" ("edit", if card already has compact layout configured).

<img src="/files/PRJbG4sQJw7pCCPEa0sV" alt="" class="gitbook-drawing">

Card builder will open.  You can add components to card and configure card settings.

To delete component drag it and drop outside of the card layout.

Configuring settings:

* If checkbox "**Collapsible**" is checked, the card on dashboard will show only the first row of components by default.  Hover mouse on it to display the whole card.
* Expand "**Styles**" section to show [CSS styles](/standard-kanban/tools/configuring-css-styles.md) form.

<img src="/files/BEDCwZEZaWHboMbbLvAo" alt="" class="gitbook-drawing">

#### Adding components

Click on component of a card. Settings of component will open at the right sidebar. Select **Type** (if you want to change type), fill in **ID**, **Value**, **Title** and set width of this component, if necessary.

<img src="/files/9HS0gWTyY00cDIaCouMo" alt="" class="gitbook-drawing">

{% hint style="info" %}
ID is required to be used in some [actions related to Cells](/standard-kanban/using-kanban/how-to-use-kanban-api-actions.md), like "Refresh Cell" or "Update Cell".

Click on "Formula Builder" button to display [very helpful assistant](/standard-kanban/tools/using-formula-editor.md).

You can copy/paste components with settings using proper buttons.
{% endhint %}

Expand "**Handler**" section and configure [handler(s),](/standard-kanban/tools/configuring-handlers.md) if necessary. Expand "Styles" section to show CSS styles form for current component.

Click on Card Preview button to show "**Card Preview**" popup:

<img src="/files/IWurPSMHQiYXNdNIj1c3" alt="" class="gitbook-drawing">

Select any existing record in the "**Search**" field to populate card preview with actual data from this record. Drag the slider to play with card preview width. You can set values to the variables in this list to affect element in card preview (variables are [set in Dashboard Configuration](/standard-kanban/using-kanban/how-to-work-with-variables.md)). Click "Save" to apply changes in card builder and save dashboard.

There are 4 types of card components:

* **Text** (looks like generic text)
* **Link** (looks like a link, default design depends on selected Kanban theme)
* **Icon** (has no text, only small image that should be taken from icon library)
* **Menu**

Text, link and icon are simple and intuitive to set up. Menu is more complex. It can have both text and icon, which position can be left or right. The position where submenu is dropped, also can be set  there:

<img src="/files/VDyWqgKDQr9EAInJ7eLF" alt="" class="gitbook-drawing">

{% hint style="warning" %}
Note: open menu cant take more room than card can offer, and it can be cut off by card edges; in this case you can allow menu fall down out of card area by adding "overflow:visible" style to the card.
{% endhint %}

The Menu component has no sense without menu items. Thus, user must set up at least one menu item in **Options** section. Menu items should have [handlers set as usual](/standard-kanban/tools/configuring-handlers.md):&#x20;

<img src="/files/Trb6mIN9dKrBzce8JYOk" alt="" class="gitbook-drawing">


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-compact-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.