Bunifu Cards

Make your layout look awesome by using Bunifu Card. It has been designed to mimic a basic card and is useful when arranging information on your dashboard.

Adding Bunifu Cards in 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 to your form as shown below then customize to desired look and feel using properties that will be elaborated later in this article.

N.B. If you haven't imported the controls to your toolbox check this article out.

Adding Bunifu cards at runtime

You can also add Bunifu Card control during design time. This works for both C# and VB.NET. To achieve this simply achieve this by navigating to your Form’s Load event and add the following code snippet:

C# Code

private void Form1_Load(object sender, EventArgs e){ var cards = new Bunifu.Framework.UI.BunifuCards(); cards.Size = new Size(200, 100); this.Controls.Add(cards);}

VB.NET Code

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load Dim cards As New Bunifu.Framework.UI.BunifuCards cards.Size = new Size(200, 100) Controls.Add(cards) End Sub

Once the code has been added your preview should look like this:

Custom properties

Color

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

C# Code

private void Form1_Load(object sender, EventArgs e)
{
var cards = new Bunifu.Framework.UI.BunifuCards() cards.Size = new Size(500, 200)
cards.color = Color.Blue
this.Controls.Add(cards)
}

VB.NET Code

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim cards As New Bunifu.Framework.UI.BunifuCards
cards.Size = New Size(500, 200);
cards.color = Color.Blue;
Controls.Add(cards)
End Sub

Border radius

This property allows you to make your cards have rounded edges.

C# Code

private void Form1_Load(object sender, EventArgs e){
var cards = new Bunifu.Framework.UI.BunifuCards()
cards.Size = new Size(500, 200)
cards.BorderRadius = 5
this.Controls.Add(cards)
}

VB.NET Code

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim cards As New Bunifu.Framework.UI.BunifuCards
cards.Size = New Size(500, 200);
cards.BorderRadius = 5
Controls.Add(cards)
End Sub

Below is a an example of card control with border radius and top edge color:

Shadow properties

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

LeftShadow

This property allows you to apply shadow to the left of the card [Boolean]

RightShadow

This property allows you to apply shadow to the right of the card [Boolean]

BottomShadow

This property allows you to apply shadow at the bottom of the card [Boolean]

ShadowDepth

This property allows you to set the depth of the shadow [Integer]

C# Code

private void Form1_Load(object sender, EventArgs e)
{
var cards = new Bunifu.Framework.UI.BunifuCards();
cards.Size = new Size(500, 200);
cards.color = Color.Blue;
cards.BorderRadius = 5;
cards.BottomSahddow = true;
cards.ShadowDepth = 80;
this.Controls.Add(cards);
}

VB.NET Code

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load Dim cards As New Bunifu.Framework.UI.BunifuCards
cards.Size = New Size(500, 200)
cards.color = Color.Blue
cards.BorderRadius = 5
cards.BottomSahddow = True
cards.ShadowDepth = 80
Controls.Add(cards)
End Sub

Here is a preview of shadow panel with shadow applied

That's it!

Bunifu cards inherits from default panel class. For further reference on card control feel free to learn more on Microsoft website