You are free to combine layouts and components together as described in the Layouts section. The following is an example of a more complex layout consisting of multiple nested components using CSS utilities to tweak final design.

Slightly modified code of the layout is shown below.

 1   from ludic.catalog.buttons import (
 2       Button,
 3       ButtonDanger,
 4       ButtonInfo,
 5       ButtonPrimary,
 6       ButtonSuccess,
 7   )
 8   from ludic.catalog.headers import H2, H3
 9   from ludic.catalog.layouts import (
10       Box,
11       Center,
12       Cluster,
13       Grid,
14       Sidebar,
15       Stack,
16       Switcher,
17       WithSidebar,
18   )
19   from ludic.catalog.typography import Paragraph
20   from ludic.html import b
21   
22   
23   Center(
24       Stack(
25           Box(
26               Cluster(
27                   b("Inverse Boxed Cluster Menu"),
28                   Cluster(
29                       Button("Item 1"),
30                       ...
31                   ),
32                   classes=["justify-space-between"],
33               ),
34               classes=["invert"],
35           ),
36           WithSidebar(
37               Stack(
38                   H2("Stack", anchor=False),
39                   Paragraph(...),
40                   H3("Switcher", anchor=False),
41                   Switcher(
42                       Box("Switcher Item 1"),
43                       ...
44                   ),
45                   H3("Cluster In a Box", anchor=False),
46                   Box(
47                       Cluster(
48                           ButtonPrimary("Cluster Button 1"),
49                           ...,
50                       ),
51                   ),
52                   H3("Grid Advertisement", anchor=False),
53                   Grid(Box(...), ...),
54               ),
55               Sidebar(
56                   Box(
57                       Stack(
58                           H3("Sidebar", anchor=False),
59                           Button("The Sidebar Item 1"),
60                           ...
61                       ),
62                   ),
63               ),
64           ),
65           classes=["large"],
66       ),
67       style={"margin-block": "2rem"},
68   )