Include banner above dbc.Container - Dash - css

Question

I'm trying to include a banner at the top of a dashboard. Currently the top section of the contain display cards and a sidebar. Is there a way to push the columns down and include a banner above them.
I'm also hoping to extend the height of the right graph to it is the same as both graphs on the left.
I've attached a screenshot of the current layout with some arrows highlighting the intended layout.
from dash import Dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px
# generic card
card = dbc.Card(
[
dbc.CardHeader("This is the header"),
dbc.CardBody(
[
html.H4("Card title", className="card-title"),
html.P("This is some card text", className="card-text"),
]
),
dbc.CardFooter("This is the footer"),
],
className='text-center m-4'
)
external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]
app = Dash(__name__, external_stylesheets = external_stylesheets)
# Set up the layout with a single graph
app.layout = dbc.Container([
dbc.Row([
# to be used as a sidebar
dbc.Col(html.Div("stuff", className="bg-secondary h-100"), width=2),
dbc.Col([
dbc.Row([
dbc.Col(card),
dbc.Col(card),
dbc.Col(card)
]),
dbc.Row([
dbc.Col(dcc.Graph(), style={
"padding-top": "10px",
"padding-bottom": "10px",
},),
]),
dbc.Row([
dbc.Col([dcc.Graph()]),
]),
], width=5),
dbc.Col([
dbc.Row([
dbc.Col(card),
dbc.Col(card),
dbc.Col(card),
]),
dbc.Row([
dbc.Col([dcc.Graph()]),
], className="h-100"),
], width=5),
])
], fluid=True)
if __name__ == '__main__':
app.run(debug=True)

Answer 1

I think you should add one more row above cards and you will need to merge 3 graph in one Row with 2 columns and change height of graph on the right.
Please check below code:
from dash import Dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px
df = px.data.gapminder()
fig = px.area(df, x="year", y="pop", color="continent", line_group="country")
# generic card
card = dbc.Card(
[
dbc.CardHeader("This is the header"),
dbc.CardBody(
[
html.H4("Card title", className="card-title"),
html.P("This is some card text", className="card-text"),
]
),
dbc.CardFooter("This is the footer"),
],
className='text-center m-4'
)
external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]
app = Dash(__name__, external_stylesheets = external_stylesheets)
# Set up the layout with a single graph
app.layout = dbc.Container([
dbc.Row([
html.Img(src=r'assets/hong-kong-skyline-panorama.jpg', alt='image')
]),
dbc.Row([
# to be used as a sidebar
dbc.Col(html.Div("stuff", className="bg-secondary h-100"), width=2),
dbc.Col([
dbc.Row([
dbc.Col(card),
dbc.Col(card),
dbc.Col(card),
dbc.Col(card),
dbc.Col(card),
dbc.Col(card)
]),
dbc.Row([
dbc.Col([dbc.Card(dcc.Graph(figure=fig),style={'height':400}),
dbc.Card(dcc.Graph(figure=fig),style={'height':400})
], width=6),
dbc.Col([dbc.Card(dcc.Graph(figure=fig,style={'height':800}),style={'height':800})], width=6),
]),
], width=10),
], className='p-2 align-items-stretch')
], fluid=True)
if __name__ == '__main__':
app.run(debug=True)
And here is the result: