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.

from ludic.catalog.buttons import (
    Button,
    ButtonDanger,
    ButtonInfo,
    ButtonPrimary,
    ButtonSuccess,
)
from ludic.catalog.headers import H2, H3
from ludic.catalog.layouts import (
    Box,
    Center,
    Cluster,
    Grid,
    Sidebar,
    Stack,
    Switcher,
    WithSidebar,
)
from ludic.catalog.typography import Paragraph
from ludic.html import b


Center(
    Stack(
        Box(
            Cluster(
                b("Inverse Boxed Cluster Menu"),
                Cluster(
                    Button("Item 1"),
                    ...
                ),
                classes=["justify-space-between"],
            ),
            classes=["invert"],
        ),
        WithSidebar(
            Stack(
                H2("Stack", anchor=False),
                Paragraph(...),
                H3("Switcher", anchor=False),
                Switcher(
                    Box("Switcher Item 1"),
                    ...
                ),
                H3("Cluster In a Box", anchor=False),
                Box(
                    Cluster(
                        ButtonPrimary("Cluster Button 1"),
                        ...,
                    ),
                ),
                H3("Grid Advertisement", anchor=False),
                Grid(Box(...), ...),
            ),
            Sidebar(
                Box(
                    Stack(
                        H3("Sidebar", anchor=False),
                        Button("The Sidebar Item 1"),
                        ...
                    ),
                ),
            ),
        ),
        classes=["large"],
    ),
    style={"margin-block": "2rem"},
)