Skip to content

Commit 54977f3

Browse files
glsdowntcbegley
glsdown
and
tcbegley
committed
Card documentation improvements (#665)
* Add image overlay example * Add horizontal card example * Fixed string formatting * Format & Fix jl R doc examples * Reorder card examples Co-authored-by: tcbegley <[email protected]>
1 parent 814f107 commit 54977f3

File tree

7 files changed

+192
-0
lines changed

7 files changed

+192
-0
lines changed

‎docs/components_page/components/card.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@ Use `CardImg` when adding images to cards. The `top` argument can be used when t
3333

3434
{{example:components/card/image.py:cards}}
3535

36+
### Image Overlays
37+
38+
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.
39+
40+
{{example:components/card/image_overlay.py:card}}
41+
3642
### List groups
3743

3844
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
6975

7076
## Card style
7177

78+
### Horizontal
79+
80+
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.
81+
82+
{{example:components/card/sizing/horizontal.py:card}}
83+
7284
### Background and color
7385

7486
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‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
library(dashBootstrapComponents)
2+
library(dashHtmlComponents)
3+
4+
card <- dbcCard(
5+
list(
6+
dbcCardImg(src = "/static/images/placeholder286x180.png", top = TRUE),
7+
dbcCardImgOverlay(
8+
dbcCardBody(
9+
list(
10+
htmlH4("Card title", class_name = "card-title"),
11+
htmlP(
12+
paste(
13+
"An example of using an image in the background of",
14+
"a card."
15+
),
16+
class_name = "card-text"
17+
),
18+
dbcButton("Go somewhere", color = "primary")
19+
)
20+
)
21+
)
22+
),
23+
style = list("width" = "18rem")
24+
)

‎docs/components_page/components/card/image_overlay.jl‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
using DashBootstrapComponents, DashHtmlComponents
2+
3+
card = dbc_card(
4+
[
5+
dbc_cardimg(src = "/static/images/placeholder286x180.png", top = true),
6+
dbc_cardimgoverlay(
7+
dbc_cardbody([
8+
html_h4("Card title", class_name = "card-title"),
9+
html_p(
10+
"An example of using an image in the background of " * "a card.",
11+
class_name = "card-text",
12+
),
13+
dbc_button("Go somewhere", color = "primary"),
14+
],),
15+
),
16+
],
17+
style = Dict("width" => "18rem"),
18+
)

‎docs/components_page/components/card/image_overlay.py‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
4+
card = dbc.Card(
5+
[
6+
dbc.CardImg(src="/static/images/placeholder286x180.png", top=True),
7+
dbc.CardImgOverlay(
8+
dbc.CardBody(
9+
[
10+
html.H4("Card title", class_name="card-title"),
11+
html.P(
12+
"An example of using an image in the background of "
13+
"a card.",
14+
class_name="card-text",
15+
),
16+
dbc.Button("Go somewhere", color="primary"),
17+
],
18+
),
19+
),
20+
],
21+
style={"width": "18rem"},
22+
)

‎docs/components_page/components/card/sizing/horizontal.R‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
library(dashBootstrapComponents)
2+
library(dashHtmlComponents)
3+
4+
card <- dbcCard(
5+
list(
6+
dbcRow(
7+
list(
8+
dbcCol(
9+
dbcCardImg(
10+
src = "/static/images/placeholder286x180.png",
11+
class_name = "img-fluid rounded-start"
12+
),
13+
class_name = "col-md-4"
14+
),
15+
dbcCol(
16+
dbcCardBody(
17+
list(
18+
htmlH4("Card title", class_name = "card-title"),
19+
htmlP(
20+
paste(
21+
"This is a wider card with supporting text",
22+
"below as a natural lead-in to additional",
23+
"content. This content is a bit longer."
24+
),
25+
class_name = "card-text"
26+
),
27+
htmlSmall(
28+
"Last updated 3 mins ago",
29+
class_name = "card-text text-muted"
30+
)
31+
)
32+
),
33+
class_name = "col-md-8"
34+
)
35+
),
36+
class_name = "g-0 d-flex align-items-center"
37+
)
38+
),
39+
class_name = "mb-3",
40+
style = list("maxWidth" = "540px")
41+
)

‎docs/components_page/components/card/sizing/horizontal.jl‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
using DashBootstrapComponents, DashHtmlComponents
2+
3+
card = dbc_card(
4+
[
5+
dbc_row(
6+
[
7+
dbc_col(
8+
dbc_cardimg(
9+
src = "/static/images/placeholder286x180.png",
10+
class_name = "img-fluid rounded-start",
11+
),
12+
class_name = "col-md-4",
13+
),
14+
dbc_col(
15+
dbc_cardbody([
16+
html_h4("Card title", class_name = "card-title"),
17+
html_p(
18+
"This is a wider card with supporting text " *
19+
"below as a natural lead-in to additional " *
20+
"content. This content is a bit longer.",
21+
class_name = "card-text",
22+
),
23+
html_small(
24+
"Last updated 3 mins ago",
25+
class_name = "card-text text-muted",
26+
),
27+
]),
28+
class_name = "col-md-8",
29+
),
30+
],
31+
class_name = "g-0 d-flex align-items-center",
32+
),
33+
],
34+
class_name = "mb-3",
35+
style = Dict("maxWidth" => "540px"),
36+
)

‎docs/components_page/components/card/sizing/horizontal.py‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
4+
card = dbc.Card(
5+
[
6+
dbc.Row(
7+
[
8+
dbc.Col(
9+
dbc.CardImg(
10+
src="/static/images/placeholder286x180.png",
11+
class_name="img-fluid rounded-start",
12+
),
13+
class_name="col-md-4",
14+
),
15+
dbc.Col(
16+
dbc.CardBody(
17+
[
18+
html.H4("Card title", class_name="card-title"),
19+
html.P(
20+
"This is a wider card with supporting text "
21+
"below as a natural lead-in to additional "
22+
"content. This content is a bit longer.",
23+
class_name="card-text",
24+
),
25+
html.Small(
26+
"Last updated 3 mins ago",
27+
class_name="card-text text-muted",
28+
),
29+
]
30+
),
31+
class_name="col-md-8",
32+
),
33+
],
34+
class_name="g-0 d-flex align-items-center",
35+
)
36+
],
37+
class_name="mb-3",
38+
style={"maxWidth": "540px"},
39+
)

0 commit comments

Comments
 (0)