Card documentation example improvements for V1

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.

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")
+)

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"),
+)

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"},
+)

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")
+)

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"),
+)

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"},
+)