How to customise the metric component

[estem]

HI,
is there a way please to customise the metric component like this :

thanks

[Encrypt]

Yes, you could utilize some custom CSS to achieve your desired result. For dynamic values, you can also use string templating.

import streamlit as st

# Custom CSS for the metric component
st.markdown(
    """
    <style>
    .metric-container {
        background-color: #f9f9f9; 
        padding: 15px; 
        border-radius: 10px; 
        display: inline-block; 
        width: 200px;
        text-align: center;
        font-family: 'Arial', sans-serif;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }
    .metric-value {
        font-size: 36px; 
        font-weight: bold; 
        color: black;
    }
    .metric-delta {
        font-size: 18px; 
        color: red;
    }
    .metric-sub {
        font-size: 14px; 
        color: gray;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Example metric display
st.markdown(
    """
    <div class="metric-container">
        <div class="metric-value">169</div>
        <div>
        <div class="metric-delta">-3.4% <span style="color: gray;">&#x25BC;</span></div>
        <div class="metric-sub">Moy. 175*<br>Moy. 160**</div>
        </div>
    </div>
    """,
    unsafe_allow_html=True
)

[estem]

brialiant work.thanks