Layout

Page layout utilities for wrapping content with common page structure

Page Layout Wrapper

wrap_with_layout

 wrap_with_layout (content:fastcore.xml.FT,
                   navbar:Optional[fastcore.xml.FT]=None,
                   footer:Optional[fastcore.xml.FT]=None,
                   container_id:str='main-content',
                   container_tag:str='div')

Wrap content with the full page layout including optional navbar and footer.

	Type	Default	Details
content	FT		The main content to display
navbar	Optional	None	Optional navbar component
footer	Optional	None	Optional footer component
container_id	str	main-content	ID for the main content container
container_tag	str	div	HTML tag for the container
Returns	FT		Main element with navbar and content

This utility provides a consistent page structure across your application. It wraps your content with optional navbar and footer components.

# Example: Simple layout with just content
from fasthtml.common import Div, H1, P

content = Div(
    H1("Page Title"),
    P("This is the main content")
)

page = wrap_with_layout(content)
print("Layout with just content:")
print(page)

Layout with just content:
<main><div id="main-content"><div><h1>Page Title</h1><p>This is the main content</p></div></div></main>

# Example: Layout with navbar and footer
navbar = Div(H1("My App"), id="navbar")
content = Div(H1("Dashboard"), P("Welcome to the dashboard"))
footer = Div(P("© 2025 My Company"), id="footer")

page = wrap_with_layout(content, navbar=navbar, footer=footer)
print("\nLayout with navbar and footer:")
print(page)


Layout with navbar and footer:
<main><div id="navbar"><h1>My App</h1></div><div id="main-content"><div><h1>Dashboard</h1><p>Welcome to the dashboard</p></div></div><div id="footer"><p>© 2025 My Company</p></div></main>

# Example: Using different container tag
content = Div(H1("Article Title"), P("Article content..."))

page = wrap_with_layout(content, container_tag="article")
print("\nLayout with article tag:")
print(page)


Layout with article tag:
<main><article id="main-content"><div><h1>Article Title</h1><p>Article content...</p></div></article></main>