✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

How to create card with icon on the right?

I saw single statistics example like this one on https://dash-gallery.plotly.host/bball-video-analysis

How to create such card with title (biggest font), description(bellow title) and graphics on the right?

Regards.

Hi,

I would look into dash bootstrap components cards.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/card/

Think its pretty straightforward.

There is top and bottom property of CardImg:

  • top (boolean, optional) : Set to True if image is at top of card. This will apply the card-img-top class which rounds the top corners to match the corners of the card.
  • bottom (boolean, optional) : Set to True if image is at bottom of card. This will apply the card-img-bottom class which rounds the bottom corners to match the corners of the card.

But I cannot see left or right.
Probably I am missing something.

Hi @gluperegistracije

There isn’t a parameter for left or right (but that would be great!)

Here is a workaround that uses dbc.CardGroup

image


import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, FONT_AWESOME])

card_icon = {
    "color": "white",
    "textAlign": "center",
    "fontSize": 30,
    "margin": "auto",
}

card1 = dbc.CardGroup(
    [
        dbc.Card(
            dbc.CardBody(
                [
                    html.H5("Card 1", className="card-title"),
                    html.P("This card has some text content", className="card-text",),
                ]
            )
        ),
        dbc.Card(
            html.Div(className="fa fa-list", style=card_icon),
            className="bg-primary",
            style={"maxWidth": 75},
        ),
    ],
    className="mt-4 shadow",
)

card2 = dbc.CardGroup(
    [
        dbc.Card(
            dbc.CardBody(
                [
                    html.H5("Card 2", className="card-title"),
                    html.P("This card has some text content", className="card-text",),
                ]
            )
        ),
        dbc.Card(
            html.Div(className="fa fa-globe", style=card_icon),
            className="bg-info",
            style={"maxWidth": 75},
        ),
    ],className="mt-4 shadow",
)


app.layout = dbc.Container(dbc.Row(dbc.Col([card1, card2], md=4)))


if __name__ == "__main__":
    app.run_server(debug=True)
1 Like

@AnnMarieW this looks awesome.
Thank you very very much.

Best regards.

I’m glad you like it! I just tweaked it a little to add the shadow to the cards.
If this works for you, could you mark it as a solution?