# Bunifu Cards

## Overview

**Bunifu Cards** is a control that is designed to mimic a basic card and is useful when arranging information on your dashboard. The following dashboard has utilized Bunifu cards to develop a layout which is exhibiting an elegant arrangement of the list of services given.

 

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Md6xdG8hyqD5BBt7Rqs%2F-Md6xm7P1piz3dkFTX1I%2Fcard03.gif?alt=media\&token=0e8b8ff7-280f-482a-93c7-ea8df434d65c)

## **Getting started**

### **Adding Bunifu Cards at design time** 

It's easy to add Bunifu Card control at design time. Start by locating Bunifu Card control in your toolbox and simply drag it to your form as shown below then customize it to your desired look and feel using properties that will be elaborated on later in this article. 

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Md6xdG8hyqD5BBt7Rqs%2F-Md75sk9Z0mTkg0vo-7_%2Fimage.png?alt=media\&token=983e9ec7-2981-4978-a24f-c61689d9c8ce)

**N.B.** If you haven't imported the controls to your toolbox [check this article out](https://docs2.bunifuframework.com/docs/getting-started/install). 

Here is an example of basic visual procedures that will **animate** Bunifu Cards once your form is loaded!

**Step one**: Drag the card controls to your form and place them nicely as shown below. Access the **`color`** property and assign each of the cards with the following colors:

{% hint style="success" %}

1. **`167, 255, 131`**
2. **`252, 232, 80`**
3. **`80, 196, 237`**
4. **`251, 168, 52`**
   {% endhint %}

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Md6xdG8hyqD5BBt7Rqs%2F-Md7GMPONKMU4K9dAL3-%2Fimage.png?alt=media\&token=ac65f018-98e9-4782-9969-c5336861e5dd)

**Step two:** Add the following information to your card as shown below. (To get the icons, download the Pichon application [here](https://www.microsoft.com/en-us/p/pichon-free-icons/9nk8t1kshffr))

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Md6xdG8hyqD5BBt7Rqs%2F-Md7OOczoG-tn2qrQJNe%2Fimage.png?alt=media\&token=7ae240ad-c7c4-4785-ab22-f923c8fd047a)

**Step three:** Locate **BunifuTransition** in your toolbox and drag it into your form.

{% hint style="info" %}
To get to know more about Bunifu Transition control check out this documentation [here](https://docs2.bunifuframework.com/docs/ui/components/bunifu-transition).
{% endhint %}

**Step four:** Access the visibility property for each Bunifu Card and set it to the value  **False.**

**Step 5**: Select your form by clicking it and navigate to its events pane. Look out for the **`Load`**event. Double click inside its empty textbox so that it can navigate you to the code editor.

**Step 6:** Inside the form load event code, write the following code as shown below:

{% tabs %}
{% tab title="C#" %}

```csharp
using System;
using System.Threading.Tasks;
using System.Windows.Forms;
using Bunifu.UI.WinForms.BunifuAnimatorNS;

private async void Form1_Load(object sender, EventArgs e)
{
    await Task.Delay(500);
    bunifuTransition1.ShowSync(bunifuCards1, false, Animation.Mosaic);
    bunifuTransition1.ShowSync(bunifuCards2, false, Animation.ScaleAndHorizSlide);
    bunifuTransition1.ShowSync(bunifuCards3, false, Animation.Mosaic);
    bunifuTransition1.ShowSync(bunifuCards4, false, Animation.Mosaic);
}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
Imports System
Imports System.Threading.Tasks
Imports System.Windows.Forms
Imports Bunifu.UI.WinForms.BunifuAnimatorNS

Private Async Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	Await Task.Delay(500)
	bunifuTransition1.ShowSync(bunifuCards1, False, Animation.Mosaic)
	bunifuTransition1.ShowSync(bunifuCards2, False, Animation.ScaleAndHorizSlide)
	bunifuTransition1.ShowSync(bunifuCards3, False, Animation.Mosaic)
	bunifuTransition1.ShowSync(bunifuCards4, False, Animation.Mosaic)
End Sub

```

{% endtab %}
{% endtabs %}

**Step 7:** Run your application. Here's what you will get:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Md7kWQ5G6GYzUug0Fbe%2F-Md7oTKvhGxveCWTaTAC%2Fcard04.gif?alt=media\&token=db7dc363-666a-4b05-9320-6a210dca34c2)

### Adding Bunifu cards at runtime 

You can also add a Bunifu Card control during runtime. This works for both C# and [VB.NET.](http://vb.net/) To achieve this simply achieve this by navigating to your Form’s **Load** event and add the following code snippet:

{% tabs %}
{% tab title="VB.NET" %}

```erlang
Imports System
Imports System.Windows.Forms
Imports System.Drawing

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim bunifu_card As New BunifuCards()
	bunifu_card.Size = New Size(450, 250)
	bunifu_card.Location = New Point(200, 100)
	bunifu_card.color = Color.DodgerBlue
	Me.Controls.Add(bunifu_card)
End Sub

```

{% endtab %}

{% tab title="C#" %}

```csharp
using Bunifu.Framework.UI;
using System;
using System.Windows.Forms;
using System.Drawing;

private void Form3_Load(object sender, EventArgs e)
{
    BunifuCards bunifu_card = new BunifuCards();
    bunifu_card.Size = new Size(450, 250);
    bunifu_card.Location = new Point(200, 100);
    bunifu_card.color = Color.DodgerBlue;
    this.Controls.Add(bunifu_card);
}

```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Let's take a deep dive and get insights into the properties that are available on Bunifu Card
{% endhint %}

## Border and Background properties

### `BackColor`

This property gets or sets the background color of the card. It can accept both the RGB and the HEX color formats. 

### **`Color`**

This property allows you to set the color of the top-edge section of the card. Simply do this by providing the color value 

### **`BorderRadius`**

This property gets or sets an integer value that makes the cards have rounded edges. By increasing the value, the edges become more rounded.

Here's how to set the following border and background properties using both the **C#** and **VB.NET** languages during the form load event.

{% tabs %}
{% tab title="C#" %}

```csharp
private void Form4_Load(object sender, EventArgs e)
{
    //sets the background color of the card
    bunifuCards1.BackColor = Color.White;
    //sets the top section of the card with a color
    bunifuCards1.color = Color.FromArgb(123, 75, 148);
    //sets the radius of the card's edges.
    bunifuCards1.BorderRadius = 24;
}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
	'sets the background color of the card
	bunifuCards1.BackColor = Color.White
	'sets the top section of the card with a color
	bunifuCards1.color = Color.FromArgb(123, 75, 148)
	'sets the radius of the card's edges.
	bunifuCards1.BorderRadius = 24
End Sub


```

{% endtab %}
{% endtabs %}

## **S**hadow properties

Shadows create nice effects in your cards that allow the card to blend well with the form's background. Below are available shadow properties you can apply:

### **`1. LeftShadow`**

This property gets or sets a boolean value that, when set to true, adds a shadow on the left side of the card.

### **`2. RightShadow`**

This property gets or sets a boolean value that, when set to true, creates a shadow on the right of the card. 

### **`3. BottomShadow`**

This property gets or sets a boolean value that, when set to true, adds a shadow to the bottom of the card.

### **`4. ShadowDepth`**

This property gets or sets an integer value that sets the depth of the shadow. A larger integer value results in significantly more shadow visibility.

## **Take Away**

Card designs have grown in popularity over the past few years for their versatility and ability to present visually appealing information – as you’ve probably noticed, most brands have really embraced cards. Pinterest and Dribbble use card layouts to feature information and visuals. Here**,** we have created this control with elegant capabilities for .NET developers**. Bunifu Cards** present the perfect “burst” of information in a way that is easy to browse and look through all at once. 


---

# 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://docs2.bunifuframework.com/docs/ui/controls/bunifu-cards.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.