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.

1 Like

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?

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.


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:

1 Like