I saw single statistics example like this one on Dash
How to create such card with title (biggest font), description(bellow title) and graphics on the right?
Regards.
I saw single statistics example like this one on Dash
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.
There isn’t a parameter for left or right (but that would be great!)
Here is a workaround that uses dbc.CardGroup
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)
@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?
@AnnMarieW I marked your answer as solution. Thank you very much again. Best regards.
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?
Beautiful, just what I was looking for, thank you for asking this quesiton
Beautiful, thank you for posting
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