Make a card clickable

Using Streamlit
1

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 :slight_smile:

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()