streamlit-cards 0.1.0

Streamlit Navbar Component

Import

from streamlit_cards.streamlit_card_component import card

Implementation

clicked =  card(3, [
                    {"title":"1000", "text":"hello", "style":{"color":"blue"}},
                    {"title":"New","text":"2000", "style":{"color":"red"}},
                    {"title": "New", "text": "2000", "style": {"background": base64_string}}
                ]
            )

Explaination

• 3 is the number of columns you want in a row.
• you can add multiple cards at a time
• You can pass following params in the style section of each card.

background: "linear-gradient(135deg, #ff9a9e, #fad0c4)",
width: "80%",
height: "200px",
blur: 10,
elevation: 15,
border_radius: "10px",
color: "#ffffff",
font_size: "20px",
border: "none",
boxShadow:"0px 10px 20px rgba(0, 0, 0, 0.3)",
backdropFilter: "blur(10px)",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
padding: "20px",
textAlign: "center",
cursor: "pointer",
transition: "transform 0.2s ease-in-out"