Skip to content

gamcoh/st-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ec2a4ee · May 10, 2024

History

40 Commits
May 20, 2022
Dec 7, 2023
Feb 21, 2024
May 20, 2022
Jun 26, 2023
Jun 26, 2023
May 20, 2022
May 20, 2022
Nov 5, 2023
Jun 5, 2023
May 10, 2024

Repository files navigation

st-card

Streamlit Component, for a UI card

authors - @gamcoh @Pernod Ricard

image

Installation

Install streamlit-card with pip

pip install streamlit-card

usage, import the card function from streamlit_card

from streamlit_card import card

hasClicked = card(
  title="Hello World!",
  text="Some description",
  image="http://placekitten.com/200/300",
  url="https://github.com/gamcoh/st-card"
)

You can also use a local image by doing this instead

import base64

with open(filepath, "rb") as f:
    data = f.read()
    encoded = base64.b64encode(data)
data = "data:image/png;base64," + encoded.decode("utf-8")

from streamlit_card import card

hasClicked = card(
  title="Hello World!",
  text="Some description",
  image=data
  url="https://github.com/gamcoh/st-card"
)

You can also create a card without an URL. That way you control the behavior when the user click on it. For instance:

from streamlit_card import card

hasClicked = card(
  title="Hello World!",
  text="Some description",
  image="http://placekitten.com/200/300",
)

if hasClicked:
    # do something

If you want, you could use a callback to handle the click like so:

from streamlit_card import card

hasClicked = card(
  title="Hello World!",
  text="Some description",
  image="http://placekitten.com/200/300",
  on_click=lambda: print("Clicked!")
)

Customizations

If you want, you could use a callback to handle the click like so:

from streamlit_card import card

res = card(
    title="Streamlit Card",
    text="This is a test card",
    image="https://placekitten.com/500/500",
    styles={
        "card": {
            "width": "500px",
            "height": "500px",
            "border-radius": "60px",
            "box-shadow": "0 0 10px rgba(0,0,0,0.5)",
            ...
        },
        "text": {
            "font-family": "serif",
            ...
        }
    }
)

If you want to set the size of as use_column_width=True, do this:

from streamlit_card import card

res = card(
    title="Streamlit Card",
    text="This is a test card",
    image="https://placekitten.com/500/500",
    styles={
        "card": {
            "width": "100%", # <- make the card use the width of its container, note that it will not resize the height of the card automatically
            "height": "300px" # <- if you want to set the card height to 300px
            ...
        }
    }
)

If you want to modify the filter applied to the image, you could do this:

from streamlit_card import card

res = card(
    title="Streamlit Card",
    text="This is a test card",
    image="https://placekitten.com/500/500",
    styles={
        "card": {
            "width": "500px",
            "height": "500px",
            "border-radius": "60px",
            "box-shadow": "0 0 10px rgba(0,0,0,0.5)",
            ...
        },
        "filter": {
            "background-color": "rgba(0, 0, 0, 0)"  # <- make the image not dimmed anymore
            ...
        }
    }
)

The editable CSS are "card", "title", "text", "filter" and "div".

Multiple descriptions

from streamlit_card import card

res = card(
    title="Streamlit Card",
    text=["This is a test card", "This is a subtext"],
    image="https://placekitten.com/500/500",
)