Why it is visually not looking like card

🎈 Using Streamlit
,
1

i wanted to create card. but its not looking like card

import streamlit as st

options = ["Option 1", "Option 2", "Option 3"]

# Create the card layout
card_container = st.container()
with card_container:
    # Title within the card
    st.header("Choose an option:")

    # Radio buttons
    selected_option = st.radio("", options, label_visibility="hidden")  # Remove label for card-like style

    # Display selection
    st.write("You selected:", selected_option)

# Apply global styling (optional)
st.markdown("""
    <style>
    .stContainer {
        border: 5px solid blue;
        padding: 10px;
        background-color: white;
    }
    </style>
    """, unsafe_allow_html=True)
2

Hi @knox

You can use the card feature from the Streamlit-extras component.

Here’s the Docs page with example code snippet on implementing this:
https://arnaudmiribel.github.io/streamlit-extras/extras/card/

3

hi @dataprofessor how can i use st.radio in that card??
i want some thing like this

Screenshot 2024-02-29 121126
Screenshot 2024-02-29 1211261913×872 27.4 KB

4

Hi @knox

It does seem to achieve this, you may need to use CSS styling, however you may need to embed the above widgets and header text within a container as in:

with st.container():
   st.header(“header”)
   # embed your code here

Next, you can inspect the CSS elements to see what element ID the above container is referred by, then apply CSS styling to achieve the border color of your interest.

Please see the following video for a step-by-step walkthrough on CSS styling: https://www.youtube.com/watch?v=gr_KyGfO_eU

Hope this helps!

5

hi @dataprofessor
yes it really helped but the problem i am getting now is that multiple elements have same class if want want style specific element it automatically gets applied to other elements

6

You can use the css pseudo-class nth-child() to select specific element.

For example select the 3rd child of an element having a e1f1d6gn0 class.

<style>
    .e1f1d6gn0:nth-child(3) {
        border: 2px solid #002D62;
        border-radius: 5px;
        padding-top: 0px;
        width: 300px;            
    }
</style>
7

hi @ferdy
problem is that header will have its own border and options will have their own border

8

I know, that is why I suggested you to try, :nth-child() pseudo class.

If the header is the first child and you want to style it, use :nth-child(1)