diff --git a/docs/components_page/components/card.md b/docs/components_page/components/card.md index 0eca4ae54..a9d40ae67 100644 --- a/docs/components_page/components/card.md +++ b/docs/components_page/components/card.md @@ -33,6 +33,12 @@ Use `CardImg` when adding images to cards. The `top` argument can be used when t {{example:components/card/image.py:cards}} +### Image Overlays + +Use `CardImgOverlay` to display the card content over the top of the card image. Depending on the image, you may or may not need additional styles or utilities. + +{{example:components/card/image_overlay.py:card}} + ### List groups Create lists of content in a card with a `ListGroup` component by setting `flush=True`. @@ -69,6 +75,12 @@ Finally, you can use custom CSS to control the size of your cards. In this examp ## Card style +### Horizontal + +Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. + +{{example:components/card/sizing/horizontal.py:card}} + ### Background and color Use the `color` argument of `Card` to set the background and border colors of `Card` to one of Bootstrap's contextual colors. When setting a dark color, use `inverse=True` to invert the text colors for better contrast. diff --git a/docs/components_page/components/card/image_overlay.R b/docs/components_page/components/card/image_overlay.R new file mode 100644 index 000000000..a4150d321 --- /dev/null +++ b/docs/components_page/components/card/image_overlay.R @@ -0,0 +1,24 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +card <- dbcCard( + list( + dbcCardImg(src = "/static/images/placeholder286x180.png", top = TRUE), + dbcCardImgOverlay( + dbcCardBody( + list( + htmlH4("Card title", class_name = "card-title"), + htmlP( + paste( + "An example of using an image in the background of", + "a card." + ), + class_name = "card-text" + ), + dbcButton("Go somewhere", color = "primary") + ) + ) + ) + ), + style = list("width" = "18rem") +) diff --git a/docs/components_page/components/card/image_overlay.jl b/docs/components_page/components/card/image_overlay.jl new file mode 100644 index 000000000..2c4ecdce6 --- /dev/null +++ b/docs/components_page/components/card/image_overlay.jl @@ -0,0 +1,18 @@ +using DashBootstrapComponents, DashHtmlComponents + +card = dbc_card( + [ + dbc_cardimg(src = "/static/images/placeholder286x180.png", top = true), + dbc_cardimgoverlay( + dbc_cardbody([ + html_h4("Card title", class_name = "card-title"), + html_p( + "An example of using an image in the background of " * "a card.", + class_name = "card-text", + ), + dbc_button("Go somewhere", color = "primary"), + ],), + ), + ], + style = Dict("width" => "18rem"), +) diff --git a/docs/components_page/components/card/image_overlay.py b/docs/components_page/components/card/image_overlay.py new file mode 100644 index 000000000..c49805635 --- /dev/null +++ b/docs/components_page/components/card/image_overlay.py @@ -0,0 +1,22 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +card = dbc.Card( + [ + dbc.CardImg(src="/static/images/placeholder286x180.png", top=True), + dbc.CardImgOverlay( + dbc.CardBody( + [ + html.H4("Card title", class_name="card-title"), + html.P( + "An example of using an image in the background of " + "a card.", + class_name="card-text", + ), + dbc.Button("Go somewhere", color="primary"), + ], + ), + ), + ], + style={"width": "18rem"}, +) diff --git a/docs/components_page/components/card/sizing/horizontal.R b/docs/components_page/components/card/sizing/horizontal.R new file mode 100644 index 000000000..491adc3bb --- /dev/null +++ b/docs/components_page/components/card/sizing/horizontal.R @@ -0,0 +1,41 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +card <- dbcCard( + list( + dbcRow( + list( + dbcCol( + dbcCardImg( + src = "/static/images/placeholder286x180.png", + class_name = "img-fluid rounded-start" + ), + class_name = "col-md-4" + ), + dbcCol( + dbcCardBody( + list( + htmlH4("Card title", class_name = "card-title"), + htmlP( + paste( + "This is a wider card with supporting text", + "below as a natural lead-in to additional", + "content. This content is a bit longer." + ), + class_name = "card-text" + ), + htmlSmall( + "Last updated 3 mins ago", + class_name = "card-text text-muted" + ) + ) + ), + class_name = "col-md-8" + ) + ), + class_name = "g-0 d-flex align-items-center" + ) + ), + class_name = "mb-3", + style = list("maxWidth" = "540px") +) diff --git a/docs/components_page/components/card/sizing/horizontal.jl b/docs/components_page/components/card/sizing/horizontal.jl new file mode 100644 index 000000000..96ddad294 --- /dev/null +++ b/docs/components_page/components/card/sizing/horizontal.jl @@ -0,0 +1,36 @@ +using DashBootstrapComponents, DashHtmlComponents + +card = dbc_card( + [ + dbc_row( + [ + dbc_col( + dbc_cardimg( + src = "/static/images/placeholder286x180.png", + class_name = "img-fluid rounded-start", + ), + class_name = "col-md-4", + ), + dbc_col( + dbc_cardbody([ + html_h4("Card title", class_name = "card-title"), + html_p( + "This is a wider card with supporting text " * + "below as a natural lead-in to additional " * + "content. This content is a bit longer.", + class_name = "card-text", + ), + html_small( + "Last updated 3 mins ago", + class_name = "card-text text-muted", + ), + ]), + class_name = "col-md-8", + ), + ], + class_name = "g-0 d-flex align-items-center", + ), + ], + class_name = "mb-3", + style = Dict("maxWidth" => "540px"), +) diff --git a/docs/components_page/components/card/sizing/horizontal.py b/docs/components_page/components/card/sizing/horizontal.py new file mode 100644 index 000000000..84549f80b --- /dev/null +++ b/docs/components_page/components/card/sizing/horizontal.py @@ -0,0 +1,39 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +card = dbc.Card( + [ + dbc.Row( + [ + dbc.Col( + dbc.CardImg( + src="/static/images/placeholder286x180.png", + class_name="img-fluid rounded-start", + ), + class_name="col-md-4", + ), + dbc.Col( + dbc.CardBody( + [ + html.H4("Card title", class_name="card-title"), + html.P( + "This is a wider card with supporting text " + "below as a natural lead-in to additional " + "content. This content is a bit longer.", + class_name="card-text", + ), + html.Small( + "Last updated 3 mins ago", + class_name="card-text text-muted", + ), + ] + ), + class_name="col-md-8", + ), + ], + class_name="g-0 d-flex align-items-center", + ) + ], + class_name="mb-3", + style={"maxWidth": "540px"}, +)