Added jumbotron example

docs/components_page/__init__.py

@@ -107,6 +107,7 @@ def register_apps():
         "form": {"markdown_path": COMPONENTS / "form.md"},
         "input": {"markdown_path": COMPONENTS / "input.md"},
         "input_group": {"markdown_path": COMPONENTS / "input_group.md"},
+        "jumbotron": {"markdown_path": COMPONENTS / "jumbotron.md"},
         "layout": {"markdown_path": COMPONENTS / "layout.md"},
         "list_group": {"markdown_path": COMPONENTS / "list_group.md"},
         "main": {"markdown_path": COMPONENTS / "main.md"},

docs/components_page/components/jumbotron.md

@@ -0,0 +1,16 @@
+---
+title: Jumbotron
+lead: Lightweight styling for showcasing key content and messages.
+---
+
+## Examples
+
+The Jumbotron component was removed in Bootstrap 5, so there is no longer a dedicated `Jumbotron` component in _dash-bootstrap-components_ either. However, thanks to Bootstrap's flexible utility classes, it is easy to recreate a jumbotron-like layout yourself. Here's a simple example
+
+{{example:components/jumbotron/simple.py:jumbotron}}
+
+### Styling the "Jumbotron"
+
+There are [many utility classes](https://getbootstrap.com/docs/5.0/utilities/spacing/) available in Bootstrap. By combining them you can easily customise the look and feel of your app.
+
+{{example:components/jumbotron/custom.py:jumbotron}}

docs/components_page/components/jumbotron/custom.R

@@ -0,0 +1,43 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+left_jumbotron <- dbcCol(
+  htmlDiv(
+    list(
+      htmlH2("Change the background", class_name = "display-3"),
+      htmlHr(class_name = "my-2"),
+      htmlP(
+        paste(
+          "Swap the background-color utility and add a `.text-*` color",
+          "utility to mix up the look."
+        )
+      ),
+      dbcButton("Example Button", color = "light", outline = TRUE)
+    ),
+    class_name = "h-100 p-5 text-white bg-dark rounded-3"
+  ),
+  md = 6
+)
+
+right_jumbotron <- dbcCol(
+  htmlDiv(
+    list(
+      htmlH2("Add borders", class_name = "display-3"),
+      htmlHr(class_name = "my-2"),
+      htmlP(
+        paste(
+          "Or, keep it light and add a border for some added definition",
+          "to the boundaries of your content."
+        )
+      ),
+      dbcButton("Example Button", color = "secondary", outline = TRUE)
+    ),
+    class_name = "h-100 p-5 bg-light border rounded-3"
+  ),
+  md = 6
+)
+
+jumbotron <- dbcRow(
+  list(left_jumbotron, right_jumbotron),
+  class_name = "align-items-md-stretch"
+)

docs/components_page/components/jumbotron/custom.jl

@@ -0,0 +1,36 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+left_jumbotron = dbc_col(
+    html_div(
+        [
+            html_h2("Change the background", class_name = "display-3"),
+            html_hr(class_name = "my-2"),
+            html_p(
+                "Swap the background-color utility and add a `.text-*` color " *
+                "utility to mix up the look.",
+            ),
+            dbc_button("Example Button", color = "light", outline = true),
+        ],
+        class_name = "h-100 p-5 text-white bg-dark rounded-3",
+    ),
+    md = 6,
+)
+
+right_jumbotron = dbc_col(
+    html_div(
+        [
+            html_h2("Add borders", class_name = "display-3"),
+            html_hr(class_name = "my-2"),
+            html_p(
+                "Or, keep it light and add a border for some added definition " *
+                "to the boundaries of your content.",
+            ),
+            dbc_button("Example Button", color = "secondary", outline = true),
+        ],
+        class_name = "h-100 p-5 bg-light border rounded-3",
+    ),
+    md = 6,
+)
+
+jumbotron =
+    dbc_row([left_jumbotron, right_jumbotron], class_name = "align-items-md-stretch")

docs/components_page/components/jumbotron/custom.py

@@ -0,0 +1,39 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+left_jumbotron = dbc.Col(
+    html.Div(
+        [
+            html.H2("Change the background", class_name="display-3"),
+            html.Hr(class_name="my-2"),
+            html.P(
+                "Swap the background-color utility and add a `.text-*` color "
+                "utility to mix up the look."
+            ),
+            dbc.Button("Example Button", color="light", outline=True),
+        ],
+        class_name="h-100 p-5 text-white bg-dark rounded-3",
+    ),
+    md=6,
+)
+
+right_jumbotron = dbc.Col(
+    html.Div(
+        [
+            html.H2("Add borders", class_name="display-3"),
+            html.Hr(class_name="my-2"),
+            html.P(
+                "Or, keep it light and add a border for some added definition "
+                "to the boundaries of your content."
+            ),
+            dbc.Button("Example Button", color="secondary", outline=True),
+        ],
+        class_name="h-100 p-5 bg-light border rounded-3",
+    ),
+    md=6,
+)
+
+jumbotron = dbc.Row(
+    [left_jumbotron, right_jumbotron],
+    class_name="align-items-md-stretch",
+)

docs/components_page/components/jumbotron/simple.R

@@ -0,0 +1,31 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+jumbotron <- htmlDiv(
+  dbcContainer(
+    list(
+      htmlH1("Jumbotron", class_name = "display-3"),
+      htmlP(
+        paste(
+          "Use Containers to create a jumbotron to call attention to",
+          "featured content or information."
+        ),
+        class_name = "lead"
+      ),
+      htmlHr(class_name = "my-2"),
+      htmlP(
+        paste(
+          "Use utility classes for typography and spacing to suit the",
+          "larger container."
+        )
+      ),
+      htmlP(
+        dbcButton("Learn more", color = "primary"),
+        class_name = "lead"
+      )
+    ),
+    fluid = TRUE,
+    class_name = "py-3"
+  ),
+  class_name = "p-3 bg-light rounded-3"
+)

docs/components_page/components/jumbotron/simple.jl

@@ -0,0 +1,23 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+jumbotron = html_div(
+    dbc_container(
+        [
+            html_h1("Jumbotron", class_name = "display-3"),
+            html_p(
+                "Use Containers to create a jumbotron to call attention to " *
+                "featured content or information.",
+                class_name = "lead",
+            ),
+            html_hr(class_name = "my-2"),
+            html_p(
+                "Use utility classes for typography and spacing to suit the " *
+                "larger container.",
+            ),
+            html_p(dbc_button("Learn more", color = "primary"), class_name = "lead"),
+        ],
+        fluid = true,
+        class_name = "py-3",
+    ),
+    class_name = "p-3 bg-light rounded-3",
+)

docs/components_page/components/jumbotron/simple.py

@@ -0,0 +1,26 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+jumbotron = html.Div(
+    dbc.Container(
+        [
+            html.H1("Jumbotron", class_name="display-3"),
+            html.P(
+                "Use Containers to create a jumbotron to call attention to "
+                "featured content or information.",
+                class_name="lead",
+            ),
+            html.Hr(class_name="my-2"),
+            html.P(
+                "Use utility classes for typography and spacing to suit the "
+                "larger container."
+            ),
+            html.P(
+                dbc.Button("Learn more", color="primary"), class_name="lead"
+            ),
+        ],
+        fluid=True,
+        class_name="py-3",
+    ),
+    class_name="p-3 bg-light rounded-3",
+)