rx.el.article(
    rx.el.header(rx.el.h2("Opening hours", font_weight="bold")),
    rx.el.p("Mon to Fri, 9 am to 6 pm."),
    rx.el.footer("Updated today", font_size="12px", color="gray"),
    padding="12px",
    border="1px solid gray",
    border_radius="8px",
)

rx.el.div(
    rx.el.header(
        rx.el.strong("Workshop"),
        rx.el.nav(rx.el.span("Home"), rx.el.span("Parts"), rx.el.span("About"), display="flex", gap="12px"),
        display="flex",
        justify_content="space-between",
        padding="8px",
        background=rx.color("indigo", 3),
    ),
    rx.el.main(
        rx.el.article(rx.el.h3("Post title", font_weight="bold"), rx.el.p("The main story goes here.")),
        rx.el.aside("Related links", padding="8px", background=rx.color("gray", 3)),
        display="grid",
        grid_template_columns="2fr 1fr",
        gap="12px",
        padding="8px",
    ),
    rx.el.section(rx.el.p("A themed section of the page."), padding="8px", border_top="1px dashed gray"),
    rx.el.footer(rx.el.address("hello@example.com"), padding="8px", font_size="13px", color="gray"),
    border="1px solid gray",
    border_radius="8px",
    overflow="hidden",
)

rx.el.div(
    rx.el.h1("h1 with no style"),
    rx.el.h3("h3 with no style"),
    rx.el.h2("h2 with style", font_size="24px", font_weight="bold"),
    rx.el.hr(margin_y="8px"),
    rx.el.blockquote(
        "Make it work, make it right, make it fast.",
        cite="https://wiki.c2.com/?MakeItWorkMakeItRightMakeItFast",
        border_left="4px solid gray",
        padding_left="12px",
        font_style="italic",
    ),
    rx.el.pre("def hello():\n    print('hi')", padding="8px", background=rx.color("gray", 3)),
    rx.el.p("Price: ", rx.el.del_("$20", date_time="2026-10-01"), " ", rx.el.ins("$15")),
)

rx.el.div(
    rx.el.ul(rx.el.li("Apples"), rx.el.li("Pears"), list_style_type="disc", padding_left="1.5em"),
    rx.el.ol(rx.el.li("Third"), rx.el.li("Fourth"), start=3, list_style_type="decimal", padding_left="1.5em"),
    rx.el.dl(
        rx.el.dt("Box", font_weight="bold"),
        rx.el.dd("A container with no meaning.", margin_left="1.5em"),
        rx.el.dt("Flex", font_weight="bold"),
        rx.el.dd("A row or column of children.", margin_left="1.5em"),
    ),
    display="flex",
    gap="24px",
    flex_wrap="wrap",
)

class HtmlLayoutDialogState(rx.State):
    is_open: bool = False

    @rx.event
    def toggle(self):
        self.is_open = not self.is_open


rx.el.div(
    rx.el.details(
        rx.el.summary("What is details?", cursor="pointer"),
        rx.el.p("A box the browser opens and closes by itself."),
    ),
    rx.el.button(
        "Toggle dialog",
        on_click=HtmlLayoutDialogState.toggle,
        padding="4px 12px",
        border="1px solid gray",
        border_radius="6px",
        margin_top="12px",
    ),
    rx.el.dialog(
        rx.el.p("A non-modal dialog, opened by the open prop."),
        open=HtmlLayoutDialogState.is_open,
        padding="12px",
        border="1px solid gray",
        border_radius="8px",
        top="40px",
    ),
    position="relative",
    min_height="150px",
)

rx.el.figure(
    rx.el.img(src="https://picsum.photos/id/1080/320/160", alt="Strawberries", border_radius="6px"),
    rx.el.figcaption("Fig. 1 - Fresh strawberries", font_size="13px", color="gray", margin_top="4px"),
    width="320px",
)

rx.el.div(
    rx.el.p("Only this line is visible."),
    # rx.el.template(...) also keeps its content off the page, but React cannot
    # hydrate children inside <template>, so it is left out of this live example.
    rx.el.noscript("Please turn on JavaScript."),
)

rx.el.article(
    rx.el.header(
        rx.el.h1("Spring menu is here", font_size="22px", font_weight="bold"),
        rx.el.p(rx.el.time("Mar 3, 2026", date_time="2026-03-03"), font_size="13px", color="gray"),
    ),
    rx.el.section(
        rx.el.p("Three new dishes join the menu this week."),
        rx.el.ul(rx.el.li("Spring rolls"), rx.el.li("Pea soup"), rx.el.li("Lemon tart"), list_style_type="disc", padding_left="1.5em"),
        margin_y="8px",
    ),
    rx.el.aside("Tip: book a table early.", padding="8px", background=rx.color("amber", 3), border_radius="6px"),
    rx.el.details(
        rx.el.summary("Do you have vegan options?", cursor="pointer", font_weight="600"),
        rx.el.p("Yes, the soup and rolls are vegan."),
        margin_y="8px",
    ),
    rx.el.hr(),
    rx.el.footer(rx.el.address("12 Market St · hello@example.com"), font_size="13px", color="gray", margin_top="8px"),
    padding="16px",
    border="1px solid gray",
    border_radius="10px",
    max_width="420px",
)