{"id":15063789,"url":"https://github.com/gamcoh/st-card","last_synced_at":"2025-04-04T22:02:42.780Z","repository":{"id":46586169,"uuid":"494379318","full_name":"gamcoh/st-card","owner":"gamcoh","description":"Streamlit component for UI cards","archived":false,"fork":false,"pushed_at":"2024-06-05T13:30:11.000Z","size":557,"stargazers_count":123,"open_issues_count":3,"forks_count":21,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T21:02:22.246Z","etag":null,"topics":["card","component","react","streamlit","ui"],"latest_commit_sha":null,"homepage":"https://pypi.org/project/streamlit-card/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gamcoh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-20T08:16:20.000Z","updated_at":"2025-03-16T10:43:18.000Z","dependencies_parsed_at":"2024-06-18T18:16:45.069Z","dependency_job_id":"21fad327-db24-43f8-8ebf-8f33bd05c20b","html_url":"https://github.com/gamcoh/st-card","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamcoh%2Fst-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamcoh%2Fst-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamcoh%2Fst-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamcoh%2Fst-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gamcoh","download_url":"https://codeload.github.com/gamcoh/st-card/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256103,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card","component","react","streamlit","ui"],"created_at":"2024-09-25T00:07:14.134Z","updated_at":"2025-04-04T22:02:42.752Z","avatar_url":"https://github.com/gamcoh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# st-card\n\nStreamlit Component, for a UI card\n\nauthors - [@gamcoh](https://github.com/gamcoh) @Pernod Ricard\n\n![image](https://github.com/gamcoh/st-card/assets/18115514/c03e07e1-53a8-4829-85f4-3008571e5c1f)\n\n## Installation\n\nInstall `streamlit-card` with pip\n```bash\npip install streamlit-card\n```\n\nusage, import the `card` function from `streamlit_card`\n```py\nfrom streamlit_card import card\n\nhasClicked = card(\n  title=\"Hello World!\",\n  text=\"Some description\",\n  image=\"http://placekitten.com/200/300\",\n  url=\"https://github.com/gamcoh/st-card\"\n)\n```\n\nYou can also use a local image by doing this instead\n```py\nimport base64\n\nwith open(filepath, \"rb\") as f:\n    data = f.read()\n    encoded = base64.b64encode(data)\ndata = \"data:image/png;base64,\" + encoded.decode(\"utf-8\")\n\nfrom streamlit_card import card\n\nhasClicked = card(\n  title=\"Hello World!\",\n  text=\"Some description\",\n  image=data\n  url=\"https://github.com/gamcoh/st-card\"\n)\n```\n\nYou can also create a card without an URL. That way you control the behavior when the user click on it.\nFor instance:\n```py\nfrom streamlit_card import card\n\nhasClicked = card(\n  title=\"Hello World!\",\n  text=\"Some description\",\n  image=\"http://placekitten.com/200/300\",\n)\n\nif hasClicked:\n    # do something\n```\n\nIf you want, you could use a callback to handle the click like so:\n```py\nfrom streamlit_card import card\n\nhasClicked = card(\n  title=\"Hello World!\",\n  text=\"Some description\",\n  image=\"http://placekitten.com/200/300\",\n  on_click=lambda: print(\"Clicked!\")\n)\n```\n\n## Customizations\n\nIf you want, you could use a callback to handle the click like so:\n```py\nfrom streamlit_card import card\n\nres = card(\n    title=\"Streamlit Card\",\n    text=\"This is a test card\",\n    image=\"https://placekitten.com/500/500\",\n    styles={\n        \"card\": {\n            \"width\": \"500px\",\n            \"height\": \"500px\",\n            \"border-radius\": \"60px\",\n            \"box-shadow\": \"0 0 10px rgba(0,0,0,0.5)\",\n            ...\n        },\n        \"text\": {\n            \"font-family\": \"serif\",\n            ...\n        }\n    }\n)\n```\n\nIf you want to set the size of as `use_column_width=True`, do this:\n```py\nfrom streamlit_card import card\n\nres = card(\n    title=\"Streamlit Card\",\n    text=\"This is a test card\",\n    image=\"https://placekitten.com/500/500\",\n    styles={\n        \"card\": {\n            \"width\": \"100%\", # \u003c- make the card use the width of its container, note that it will not resize the height of the card automatically\n            \"height\": \"300px\" # \u003c- if you want to set the card height to 300px\n            ...\n        }\n    }\n)\n```\n\nIf you want to modify the filter applied to the image, you could do this:\n```py\nfrom streamlit_card import card\n\nres = card(\n    title=\"Streamlit Card\",\n    text=\"This is a test card\",\n    image=\"https://placekitten.com/500/500\",\n    styles={\n        \"card\": {\n            \"width\": \"500px\",\n            \"height\": \"500px\",\n            \"border-radius\": \"60px\",\n            \"box-shadow\": \"0 0 10px rgba(0,0,0,0.5)\",\n            ...\n        },\n        \"filter\": {\n            \"background-color\": \"rgba(0, 0, 0, 0)\"  # \u003c- make the image not dimmed anymore\n            ...\n        }\n    }\n)\n```\n\nThe editable CSS are `\"card\"`, `\"title\"`, `\"text\"`, `\"filter\"` and `\"div\"`.\n\n## Multiple descriptions\n\n```py\nfrom streamlit_card import card\n\nres = card(\n    title=\"Streamlit Card\",\n    text=[\"This is a test card\", \"This is a subtext\"],\n    image=\"https://placekitten.com/500/500\",\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgamcoh%2Fst-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgamcoh%2Fst-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgamcoh%2Fst-card/lists"}