Card Component Enhancement

You can apply CSS to enhance the look and feel of cards like the image above.

Step 1

Add columns to your screen.

Step 2

Double click the card and add CSS class to column 1 as “snippet-card-i-one”, column 2 as “snippet-card-i-two”, column 3 as “snippet-card-i-three”

Step 3

Edit the card and change the settings of Header, Footer, and Icon as seen below.

Step 4

In your CSS tab add the following code. 

.af-card-component {
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%) !important;
    border-radius: 4px;
}

.af-card-component .con i {
    font-size: 40px;
    margin-right: 15px;
    vertical-align: middle;
    position: absolute;
    top: -12px;
    left: 6%;
    padding: 12px;
    color: white !important;
    border-radius: 5px;
}

.snippet-card-i-one .af-card-component .con i {
    background: linear-gradient(60deg, #ef5350, #e53935);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%),
        0 7px 10px -5px rgb(244 67 54 / 40%);
}

.snippet-card-i-two .af-card-component .con i {
    background: linear-gradient(60deg, #66bb6a, #43a047);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%),
        0 7px 10px -5px rgb(76 175 80 / 40%);
}

.snippet-card-i-three .af-card-component .con i {
    background: linear-gradient(60deg, #ffa726, #fb8c00);
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%),
        0 7px 10px -5px rgb(255 152 0 / 40%);
}

.af-card-component .con {
    margin-bottom: 20px;
}

.val.t-card-value {
    margin-right: 9%;
    position: absolute;
    top: 50%;
    right: 3%;
    padding-bottom: 14px;
}

.af-card-component .header {
    border: none;
    margin-right: 8%;
}

Original Community Post:

Card CSS look enhancement - Community Discussions / Tips and Tricks - Tadabase Community