How to create card with icon on the right?

Dash Python
1

I saw single statistics example like this one on Dash

image
image1797×725 45.9 KB

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

Regards.

2

Hi,

I would look into dash bootstrap components cards.

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

Think its pretty straightforward.

3

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.

4

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)
3 Likes
5

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

Best regards.

6

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?

7

@AnnMarieW I marked your answer as solution. Thank you very much again. Best regards.

1 Like
8

I have an isolated environment with no internet connection.
I tried to use fontawesome css file locally, but did not work.
What are the steps to install fontawesome for local use?

9

Beautiful, just what I was looking for, thank you for asking this quesiton

10

Beautiful, thank you for posting

1 Like
11

Hi @vnavdulov

Glad you found that helpful :slight_smile:

For more information on making cards, see also:

1 Like
13

Thank you! You’re killing me, these are too good! I like the indicators, really helpful from a UX perspective. I was going to mine with just color indicating the current state. Scope creep… I might have to redo mine now

1 Like