<div class="progress-card">
    <div class="progress-card-badge"></div>
    <div class="progress-card-data">
<!------------------------------- ↓Text data to replace↓ --->
        <h3 class="progress-card-title">75 of 100</h3>
        <p class="progress-card-description">Some message</p>
        <div class="progress-line-container">
            <div class="progress-indicator"></div>
        </div>
    </div>
</div>

<style>

:root {
    --progressValue: PROGRESSVALUETOREPLACE%; /* Keep the % symbol as is */
    --progCardBadge: url(BADGEURLTOREPLACE);
    --progressBarColor: 162,55,227; /* R,G,B */
    --progressCardBackground: PROGRESSCARDBACKGROUNDCOLORTOREPLACE;
}

.progress-card {
    padding: 24px;
    background: var(--progressCardBackground);
    border-radius: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.progress-card-badge {
    flex: none;
    width: 80px;
    height: 80px;
    background: var(--progCardBadge) center/cover;
}

.progress-card-data {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.progress-card-title {
    margin-bottom: 4px !important;
}

.progress-card-description {
    font-size: 14px !important;
    line-height: 1.2 !important;
    opacity: .4;
}

.progress-line-container {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background-color: white;
}

.progress-indicator {
    width: var(--progressValue);
    height: 100%;
    background-image: linear-gradient(90deg, rgba(var(--progressBarColor),.1) 0%, rgba(var(--progressBarColor),1) 100% );
    border-radius: 4px;
}

</style>

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

</aside>

<aside> 💡 Use an If-Then-Else column to return different badges depending on progress value.

</aside>