@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 | |