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/
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, 
Snehan
1 Like
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