@urban-ui/page v0.1.0
@urban-ui/page
layout | page
Various generic page layouts
## Getting started
pnpm add -S @urban-ui/page
Details
A collection of various common page layouts.
Pages are generally an example of slot-based components, where we place content into slots and let the layout components handle the layout. Where a 'unit' of functionality requires multiple individual components to work together we expose each individual component and expect consumers to compose them, this is a pattern used through urban-ui
and is inheritted from radix-ui
. This is more flexible and allows customisation to occur.
## Page layouts
Triple
Three column layout with no top navigation bar.
The main section has a maximum content width and will centralise on large screens.
Navigation would typically live in the left aside. This aside is scrollable. It is locked to the left of the screen.
The right aside is only visible on the largest screens. This aside is scrollable. It is locked to the right of the screen.
import {Triple} from '@urban-ui/page'
export function MyPage() {
return (
<Triple.Root>
<Triple.Aside>
{// e.g. Navigation}
</Triple.Aside>
<Triple.Main>
<Triple.Article>
{// Main page content}
</Triple.Article>
</Triple.Main>
<Triple.Additional>
{// Non-essential additional content space}
</Triple.Additional>
</Triple.Root>
)
}
Component | Description | Tokens |
---|---|---|
Root | Responsible for main layout | |
Aside | Left aside | Width: @sm: aside1, @md+: aside3 |
Main | Main content container | |
Article | Inner content container | width: content3 |
Additional | Right aside | width: aside3 |
Aside
A 2 column layout that has a constrained max-width for content.
A secondary aside is included which sits within the main content area and is only visible on the largest screens.
There are some optional units here. The HeaderLogo
will align itself with the size of the primary aside. The MainAside
can be used if required to add additional column at large screen sizes.
import {Aside} from '@urban-ui/page'
export function MyPage() {
return (
<Aside.Root>
<Aside.Header fixed>
<Aside.HeaderContent>
<Aside.HeaderLogo>
{// e.g Product logo}
</Aside.HeaderLogo>
{// e.g. Header navigation or controls}
</Aside.HeaderContent>
</Aside.Header>
<Aside.Aside>
{// e.g. Navigation}
</Aside.Aside>
<Aside.Main>
<Aside.Article>
{// Main page content}
</Aside.Article>
<Aside.MainAside>
{// Non-essential additional content space}
</Aside.MainAside>
</Aside.Main>
</Aside.Root>
)
}
Component | Description | Tokens |
---|---|---|
Root | Responsible for main layout | |
Header | Top header bar | height: header2 |
HeaderContent | Inner header container | width: page1 |
HeaderLogo | Aligns with left aside | width: aside3 |
Aside | Left aside | Width: @sm: none, @md+: aside3 |
Main | Main content container | |
Article | Inner content container | width: content3 |
MainAside | Right aside | width: aside3 |
ConstrainedAside
Variant of the Aside page layout with 2 columns and an additional right aside column at larger screens.
import {ConstrainedAside} from '@urban-ui/page'
export function MyPage() {
return (
<ConstrainedAside.Root>
<ConstrainedAside.Header>
<ConstrainedAside.HeaderContent>
<ConstrainedAside.HeaderLogo>
{// e.g Product logo}
</ConstrainedAside.HeaderLogo>
{// e.g. Header navigation or controls}
</ConstrainedAside.HeaderContent>
</ConstrainedAside.Header>
<ConstrainedAside.Aside>
<ConstrainedAside.AsideContent>
{// e.g. Navigation}
</ConstrainedAside.AsideContent>
</ConstrainedAside.Aside>
<ConstrainedAside.Main>
<ConstrainedAside.Article>
{// Main page content}
</ConstrainedAside.Article>
</ConstrainedAside.Main>
<ConstrainedAside.MainAside>
<ConstrainedAside.AsideContent>
{// Non-essential additional content space}
</ConstrainedAside.AsideContent>
</ConstrainedAside.MainAside>
</ConstrainedAside.Root>
)
}
Component | Description | Tokens |
---|---|---|
Root | Responsible for main layout | |
Header | Top header bar | height: header2 |
HeaderContent | Inner header container | |
HeaderLogo | Aligns with left aside | width: aside2 |
Aside | Left aside | Width: @sm: none, @md+: aside2 |
Main | Main content container | |
Article | Inner content container | width: content2 |
MainAside | Right aside | width: aside2 |
Single full bleed
Single column ideal for reading, with the ability to embed wider "full-bleed" elements within the content.
import {FullBleed} from '@urban-ui/page'
export function MyPage() {
return (
<FullBleed.Root>
<FullBleed.Header fixed>
<HeaderContent>
{// e.g. Header stuff}
</HeaderContent>
</FullBleed.Header>
<FullBleed.Main>
{// e.g. Content}
<FullBleed.Full>
<img
src='https://picsum.photos/1600/400'
style={{width: '100%', aspectRatio: '4 / 1'}}
/>
</FullBleed.Full>
<FullBleed.Full>
<FullBleed.Bleed css={{backgroundColor: 'grey'}}>
<pre style={{color: 'white'}}>
{// Content here will have vertical rhythm}
</pre>
</FullBleed.Bleed>
</FullBleed.Full>
</FullBleed.Main>
</FullBleed.Root>
)
}
Component | Description | Tokens |
---|---|---|
Root | Responsible for main layout | |
Header | Top header bar | height: header2 |
Main | Main content container | |
Full | Full-width element | |
Bleed | Constrianed element |