Style Column Metrics like the Documentation

Working on nice Streamlit app with Columns and Metrics. I noticed the streamlit doc website appears to be a streamlit app with columns? If so, how can I format my metric in similar way? thank you

Well, you can achieve this effect in part with html & st.markdown, but you have to inspect elements, isolate them and then colour them. Refer the pix for the effect I tried to produce and the colours can be changed as required.

Or you can just create your own components and layouts so it looks exactly how you want.
A page from a credit assessment system I created for a client, all Streamlit with custom components for the widgets not available from the standard offering.

2 Likes

Wow, how does one make your own components (like you did with metrics and adding the icon in upper right corner)? I’d love to see a code example to start with.

Does anyone know if the stream doc website is actually written in streamlit? https://docs.streamlit.io/

Would be great if there was a way to add Font Awesome icons to metrics: Font Awesome

Here is an example with fontawesome icons and different colours.

But components are a better way to go.

Cheers.

Hi @saxon11,

Just to clarify: The Streamlit documentation is not a Streamlit app. We use Next.js, React, and Markdown to build the site and Netlify to host it. The code is public: GitHub - streamlit/docs: Source code for the Streamlit Python library documentation

Best, :balloon:
Snehan

1 Like

Can you share the source code for this @Shawn_Pereira . Thanks

Hi @yeshwanth1312

I don’t have the earlier code as that was written just for a temporary purpose.

I have re-written the following code only for 1 kpi metric. You can do:
a. put the code in a function, so you can all it many times
b. change the parameters & variables to suit your purpose
c. use st.columns for multiple kpi metrics, etc.

# variables
wch_colour_box = (0, 204, 102)  # green
wch_colour_font = (0, 0, 0)  # blackfont
fontsize = 18
valign = "left"
iconname = "fas fa-asterisk"
sline = "Users" # kpi name
lnk = ''
i = 1000  # kpi value
htmlstr = f"""

{i}

                    <span style='font-size: 18px;
                    margin-top: 0;'>{sline}</style>
                    </span></p>"""

st.markdown(lnk + htmlstr, unsafe_allow_html=True)

Also, pasting a snapshot of the code here, as my copy-paste makes some of my text disappear.

Cheers

1 Like

Maybe it’s late but how can i get like these customized metrics?

Just try out the code given in the picture above, and then modify it for your use, as needed.

Cheers