# Card

## Purpose

The lowcodera card component represents a common layout item in many modern design languages. This card component contains content and actions about a single subject and can work well on its own or within a Power Apps gallery. All properties on this card component support dynamic data binding.

## Variations

There are several variations of card with different colors and configuration properties.

* Card with Image
* Card with Header

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FPtf7JwDcTjLMLfjNR8zD%2Fimage.png?alt=media\&token=048bef58-cd8d-47e7-a8ff-4c207395c75a)

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="216">Control Property</th><th>Description</th><th width="150">Required</th><th width="181">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>ImageURL</td><td>Property to configure Image URL </td><td>X</td><td>String</td></tr><tr><td>ImagePosition</td><td>Property to configure Image Position in a card</td><td>X</td><td><p>Bottom</p><p>Header</p><p>Middle</p><p>Overlay</p><p>Top</p></td></tr><tr><td>BackgroundColor</td><td>Property to set background color for card component</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr><tr><td>HeaderText</td><td>Property to set header text for a card</td><td>X</td><td>String</td></tr><tr><td>HeaderFontColor</td><td>Property to set font color for header</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr><tr><td>TagText</td><td>Property to represent  Tag Text for card</td><td>X</td><td>String</td></tr><tr><td>TagFontColor</td><td>Property to show Font Color for tag text</td><td>X</td><td>String</td></tr><tr><td>TagIcon</td><td>Property to show tag icon in a card</td><td>X</td><td>String</td></tr><tr><td>Title</td><td>Property to set Title for card</td><td>X</td><td>String</td></tr><tr><td>TitleFontColor</td><td>Property to set font color for Title</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr><tr><td>Description</td><td>Property to set Description for card</td><td>X</td><td>String</td></tr><tr><td>DescriptionFontColor</td><td>Property to set font color for description.</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr><tr><td>HorizontalAlignment</td><td>Property to set horizontal alighment for card title, description.</td><td>X</td><td><p>Center</p><p>Left</p><p>Right</p></td></tr><tr><td>Theme</td><td>Property to set Theme for card control.</td><td>X</td><td><p>Danger</p><p>Default</p><p>Info</p><p>Primary</p><p>Secondary</p><p>Success</p><p>Warning</p></td></tr></tbody></table>

## Example

### Card with Image

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2F9abZGUe6kPGg1C3FfQhg%2Fimage.png?alt=media\&token=f1fa57b8-4e61-4ea7-a45b-63c123f8e86c)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `ImageURL` property is to set as **valid publically accessible URL (e.g.** [**https://images.freeimages.com/images/large-previews/0d6/blue-flowers-with-macro-4-1400913.jpg**](https://images.freeimages.com/images/large-previews/0d6/blue-flowers-with-macro-4-1400913.jpg)**)**
* [x] `BackgroundColor` is to set as **#EBEAEB**
* [x] `TagText` is to set as **flower**
* [x] `TagFontColor` is to set as **#CD8332**
* [x] `TagIcon` is to set as **bacon**
* [x] `Title` is to set as **Project Jasmine**
* [x] `TitleFontColor` is to set as **black**
* [x] `Description` is to set as **valid description**
* [x] `DescriptionFontColor` is to set as **black**

{% endtab %}
{% endtabs %}

### Card with Header

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2F2zxd6xvN0xksUnTmVIyt%2Fimage.png?alt=media\&token=b8bafbec-aa00-442a-934a-b9e1c8a60c40)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `HeaderText` is to set as **Monsoon Flowers**
* [x] `HeaderFontColor` is to set as **white**
* [x] `TagText` is to set as **flower**
* [x] `TagIcon` is to set as **bahai**
* [x] `Title` is to set as **Project Lily**
* [x] `TitleFontColor` is to set as **black**
* [x] `Description` is to set as **valid description**
* [x] `DescriptionFontColor` is to set as **black**
  {% endtab %}
  {% endtabs %}

### Card with Header