total balance

$ 2 546,80

income

$ 783,50

expense

$ 512,00

<div class="holocard">
    <div class="holocard-inside">
        <div class="holocard-inside-info-block info-block-span-2">
            <div class="holocard-inside-first-line">
                <p class="holocard-inside-label">total balance</p>
                <div class="holocard-action-icon"></div>
            </div>
            <h1 class="holocard-inside-value">$ 2 546,80</h1> <!--- Replace --->
        </div>
        <div class="holocard-inside-info-block">
            <p class="holocard-inside-label">income</p>
            <h3 class="holocard-inside-value">$ 783,50</h3> <!--- Replace --->
        </div>
        <div class="holocard-inside-info-block">
            <p class="holocard-inside-label">expense</p>
            <h3 class="holocard-inside-value">$ 512,00</h3> <!--- Replace --->
        </div>
    </div>
</div>

<style>

.holocard-inside-label,
.holocard-inside-value {
    margin: 0 !important;
}

.holocard {
    width: 100%;
    height: 220px;
    border-radius: 24px;
    padding: 24px;
    background:
        conic-gradient(from 162.23deg at 85% 22.5%, #000000 0deg, #FFFFFF 50.63deg, #000000 106.88deg, #FFFFFF 153.75deg, #000000 210deg, #FFFFFF 258.75deg, #000000 360deg),
        conic-gradient(from 162.23deg at 85% 22.5%, #000000 0deg, #FFFFFF 50.63deg, #000000 106.88deg, #FFFFFF 153.75deg, #000000 210deg, #FFFFFF 258.75deg, #000000 360deg),
        radial-gradient(100% 166.67% at 0% 0%, #FFCFA4 0%, #C4B5FE 25.52%, #7A3209 48.44%, #FFFFFF 100%);
    background-blend-mode:
        screen,
        difference,
        normal;
}

.holocard-inside {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    align-content: space-between;
}

.holocard-inside-first-line {
    display: flex;
    justify-content: space-between;
}

/* Replace url in brackets if you want another icon, or delete the whole thing */
.holocard-action-icon {
    width: 19px;
    height: 19px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA09JREFUaEPtmY+xTUEMxr9XASpABeiAClABKkAFqAAVoAJUgApQASpABcxvZvfN3tzsv5zFnPEyc+fOnXM2my/5ks3mnmjncrJz+3UG4F9HcGUErkq6KYnvS+m7xPdJ0ldJ7yV9kMTvzbIVAIbel3QrGT1jEGDeSHqegM2sPX03CuC8pEeSHoR2PV70TNITST9m9UUA4O0XkgCxUjD+XorKsN5ZAE87Xn+bDIAeGJR5Tl4AGMrhAHKlJkTj4SiCUQBsjtfZ3MrPBAo+j1IAfejC2HOOzpcJRFffKIDXFePhLUZ0N6p4FCDkEflkBRBQqikjADCQSlMKXr++qhSmkkt5tdGgQjULRQ8AYcb7pXxOxke9XvMo+QENr5gXbrcSuwWA8H4x1QbPs9Fq47PN6Cbxy0iw1+Xani0AcPCO8ca1Cdr8Mmt70c6vU7E+mrVVKtWU4gm8XwoJ+7iXVMXzKABUsI9NbKJAeT6QGgCbuBHqbAEAfTG2pJLrwBoAvE8UslDOoNSMbAHAPnfT2ZP3BBBR6EbA4+CFP5i4NacQhe+9HPQiYPlHe+CdwDPRiL5LWS3bDloM6H0qHgC7KEKfqMF2HYcY/VeWI2d6AChh0CjLjXQJWWXUjB5O+3fFAs4ISnkzAjb5Zmp/qXtrEqPLy8cDp3sRWLExm/8VPf8FgN1RiEQpO8JoEq+gkE1iOuGywLiDrVVldAWAUBlddZCtABA6yFa1ElsBhFsJSiCN08WiqEdO460AbDP3zRuejbbTzVtR5WjdAsC7DU6107u/0ODUXV8pAeDdiiJUmmneiDzNZDm2bN4Gexdtb6zCQceo4+h+OmOp8y7GM8I5OKjSXpRTV3oAWOQNtogEJ/SSGX8ymrbZDow3D7Yyai8feMahxybROREGM/Xzph2v0r24GdiRCOR8IBJ2TsQzjOfI57Y0CgTDuSqi0xvTYzw6u/pGAWQveHQqPQRX+ZAfJF85XmdEAr9p0Fp37C5tejeyXi6yOZTyxuK9ta3nAOb0rSast3g2AlkHYYe3dmodBYDX0deljN0gCiDrofTBVaJS9k4jQOhtiCSfcEneCqA0NPMbjgPMjsm5jOS/WfkvYEkJXglgxOvL3zkDsNylkwp3H4Hfu2jAMZ6SjhAAAAAASUVORK5CYII=);
    opacity: .6;
}

.info-block-span-2 {
    grid-column: span 2;
    display: grid;
    gap: 4px;
}

.holocard-inside-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    opacity: .6;
}

</style>

<aside> 📌 Use a Template column to paste the code and replace necessary parts. Use a Rich Text with this template column.

</aside>

Untitled