Hi guys , im new on using streamlit and i need some help. i have been trying to design a page to have cards horizontally and make then clickable.
i first used the cards extra and used columns to hard code them but the cards could not fully appear and not all information was shown. then i needed the cards to be dynamic depending on the number of elements from the database. i wrote the following code, the cards appear perffectly well and information is shown, the problem is i want to keep the code as is but add a click function when a card is clicked i want it to run a function. all my search suggest using a button but i think there is a way to make it work with my code as is , the function to be run is display_information(index), index being the position of the card from 0. Bellow is my code thanks in advance
import streamlit as st
def main():
st.write("# Project Workflow")
col1, col2 = st.columns([5, 1])
with col2:
if st.button("Create New Project"):
st.session_state["creating_project"] = True
switch_page("new brief")
# Fetch the stages dynamically
stages = get_stages()
st.markdown(
"""
<style>
.card-container {
display: flex;
justify-content: start; /* Align items at the start of the container */
gap: 20px; /* Space between cards */
flex-wrap: wrap;
}
.card {
width: 220px; /* Set fixed width */
min-height: 180px;
background: #262730; /* Dark grayish background */
border-radius: 12px;
padding: 15px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
text-align: center;
flex-direction: column; /* Organize content vertically inside each card */
display: flex;
justify-content: center;
transition: transform 0.2s ease-in-out;
color: white;
}
.card:hover {
transform: scale(1.05);
background: #33343a; /* Slightly lighter on hover */
}
.card h4 {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
color: white; /* Ensure contrast */
}
.card p {
font-size: 13px;
color: #b0b0b0; /* Light gray for description */
}
</style>
""",
unsafe_allow_html=True,)
st.markdown('<div class="card-container">', unsafe_allow_html=True)
with st.container():
cols = st.columns(len(stages)) # Create a column for each stage
for col, stage in zip(cols, stages):
with col:
st.markdown(
f"""
<div class="card">
<h4>{stage['name']}</h4>
<p>{stage['description']}</p>
</div>
""",
unsafe_allow_html=True,
)
# Close card container
st.markdown('</div>', unsafe_allow_html=True)
main()