[Demo] Add sample code for layout visual

[huong-li-nguyen]

Description

• Will not be merged
• Just for demo purposes for @stichbury

Python Code

import vizro.models as vm
from vizro import Vizro

page = vm.Page(
    title="one_left_two_right",
    layout=vm.Layout(grid=[[0, 1],
                           [0, 2]]),
    components=[vm.Card(id="comp-zero", text="""# Component 0"""),
                vm.Card(id="comp-one", text="""# Component 1"""),
                vm.Card(id="comp-two", text="""# Component 2"""),
                ],
)

dashboard = vm.Dashboard(pages=[page], theme="vizro_light")

if __name__ == "__main__":
    Vizro().build(dashboard).run()

Custom CSS

.card:has(#comp-zero) {
  background-color: #8993ff;
}

.card:has(#comp-one) {
  background-color: #accbff;
}

.card:has(#comp-two) {
  background-color: #dbedff;
}

Screenshot

Notice

• [x] I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.