Streamlit Card

1.0.2 · active · verified Wed Apr 15

Streamlit Card is a custom component that allows developers to easily create interactive and customizable UI cards within their Streamlit applications. It provides options for displaying titles, text, images, and handling clicks, enhancing the visual appeal and interactivity of Streamlit dashboards. The library is currently at version 1.0.2 and receives active maintenance updates.

Warnings

gotcha When using local images, `streamlit_card` expects the image data as a base64 encoded string, not a direct file path. This is a common pattern for Streamlit custom components.
Fix: Use `base64.b64encode(f.read()).decode('utf-8')` to encode local image files. For example: ```python import base64 with open('path/to/your/image.png', 'rb') as f: data = f.read() encoded_image = 'data:image/png;base64,' + base64.b64encode(data).decode('utf-8') card(..., image=encoded_image, ...) ```
gotcha Be aware of naming conflicts and similar libraries. `streamlit-card` is a distinct component. `streamlit-extras` also contains a 'card' module (`from streamlit_extras.card import card`), and `streamlit-swipecards` offers swipeable card functionality. Ensure you import from the correct library to avoid unexpected behavior.
Fix: Explicitly use `from streamlit_card import card` to import this specific component. If using multiple card components, use aliasing like `from streamlit_card import card as st_card` to prevent name clashes.
gotcha For simple clickable images that navigate to a URL, Streamlit's native `st.image` function with the `link` parameter might be a simpler alternative. `streamlit-card` offers more extensive styling and callback options beyond basic image linking.
Fix: Consider `st.image(image_source, caption='Click me', link='https://example.com/')` for basic clickable images. Use `streamlit-card` when you need complex layouts, text overlays, custom styling, or in-app Python callbacks on click.

Install

pip install streamlit-card Install latest version

Imports

card
```
from streamlit_card import card
```

Quickstart

This quickstart demonstrates how to create two types of cards: one that redirects to a URL upon click, and another that triggers an internal Streamlit callback function. It also shows basic styling customization.

import streamlit as st
from streamlit_card import card

st.set_page_config(layout='wide')

st.title("My Streamlit Cards Demo")

# Example 1: Basic Clickable Card with URL
has_clicked_github = card(
    title="Visit GitHub",
    text="Explore the source code of streamlit-card.",
    image="https://placekitten.com/200/300",
    url="https://github.com/gamcoh/st-card",
    styles={
        "card": {
            "width": "300px",
            "height": "200px",
            "border-radius": "10px",
            "box-shadow": "0 0 10px rgba(0,0,0,0.2)"
        }
    }
)

if has_clicked_github:
    st.write("Redirecting to GitHub...")

# Example 2: Card with internal callback for interaction
def handle_card_click():
    st.session_state['card_message'] = 'Card was clicked! You can perform actions here.'

if 'card_message' not in st.session_state:
    st.session_state['card_message'] = 'Click the card below!'

has_clicked_callback = card(
    title="Interactive Card",
    text="Click me to trigger an action within the app.",
    image="https://placebear.com/200/300",
    on_click=handle_card_click,
    styles={
        "card": {
            "width": "300px",
            "height": "200px",
            "border-radius": "10px",
            "background-color": "#f0f2f6",
            "box-shadow": "0 0 10px rgba(0,0,0,0.1)"
        }
    }
)

st.write(st.session_state['card_message'])

view raw JSON →