Show information about list of documents as a card for each document - possible

Using Streamlit
#1

Hi,

Newcomer to streamlit, and really buzzing about it’s potential.

I have a list of documents. Each document comprises a title, journal name, score etc.

Q. Is it possible to display each document as an individual “card” that shows the associated pieces of information, that is more aesthetically pleasing than a row in a table?

Many thanks for any guidance/example possibility :slight_smile:

1 Like
#2

Hey @LostGoatOnHill,

Welcome to the Streamlit community!!! :partying_face: :partying_face: :two_hearts: :tada: :two_hearts: :partying_face:

Thats a great question, I’m not sure of the best solution, but maybe a picture or example of what you were hoping to create could give me an idea of a best way to try and make this happen?

Cheers,
Marisa

1 Like
#3

Something like this would be great. There may be 5, 10 or 100 of these cards to display (list of results from semantic search of free-text documents)

image
image1402×568 83.5 KB

#4

Hi Marisa. Just wondered if you had any further thoughts. Achievable perhaps via writing css/html with st.markdown or some other way? Thanks!

1 Like
#5

Hey @LostGoatOnHill,

Sorry for the delay! Lots of exciting things happening over here and time got away from me!

I actually sent this on to our creators (Those are the super friendly and helpful folks on the forum with a :balloon: next to their name). I was hoping one of the custom components that our community members create might be able to do what you’re looking for. Unfortunately, none of the current components would really do what you’re looking for. Actually, @synode is working on something similar but it’s not ready yet!

Other options for you would be:

  • To you can make your own component to use with Streamlit! Custom components are developed and managed by the community, and you can use them by pip installing a component and then importing it into your script. Check out what’s available here: Streamlit Components and see if this is something you would like to do!

  • Another suggestion (shout-out to @Charly_Wargnier) would be to style something in Pandas and then render it using st.table() checkout the Pandas Styling docs here

  • Another option (shout-out @andfanilo) is that this would be a great exercise for static HTML! You can put HTML code in your Streamlit app using st.markdown with the unsafe_allow_html = True flag. Here is a helpful link to creating horizontal cards that you should be able to copy-paste to try out: Cards · Bootstrap v5.0

Hope this helps!
Happy Streamlit-ing!
Marisa