Page layout components for consistent page structure with header, actions, and content areas
The Layout components allow you to easily create pages with a consistent rendering in Nowts.
There are 6 components:
Layout: main container that defines the page layout
.jpg&w=64&q=75){kind=small}
.jpg&w=32&q=75){kind=small}
size?: "sm" | "default" | "lg" | "xl"default (max-width: 1024px) - 1024px widthsm (max-width: 768px) - compact widthlg (max-width: 1792px) - large widthxl (max-width: 1400px) - extra-large widthLayoutHeader: page header containing the title and description
LayoutTitle: page title (uses Typography h2 variant)
LayoutHeaderLayoutDescription: page description (uses default Typography)
LayoutHeaderLayoutActions: container for action buttons
LayoutContent: main content area of the page
import {
Layout,
LayoutActions,
LayoutContent,
LayoutDescription,
LayoutHeader,
LayoutTitle,
} from "@/features/page/layout"
All components accept standard HTML element properties (className, style, etc.) via ComponentPropsWithoutRef.
type LayoutProps = ComponentPropsWithoutRef<"div"> & {
size?: "sm" | "default" | "lg" | "xl";
};type Props = ComponentPropsWithoutRef<"div">;type LayoutTitleProps = ComponentPropsWithoutRef<"h1">;type LayoutDescriptionProps = ComponentPropsWithoutRef<"p">;