Layout

The Layout component provides a flexible and composable way to structure your application's pages using semantic sections and responsive layouts. It includes helpers for common page areas (Header, Aside, Main, Footer) and a powerful layout system for arranging content.

Usage

import { Page, Layout } from '@asphalt-react/layout'
import { Appbar } from '@asphalt-react/appbar'
import { Logo } from '@asphalt-react/logo'

<Page>
  <Page.Header>
    <Appbar head={<Logo />} />
  </Page.Header>
  <Page.Main>
    <Layout>
      content
    </Layout>
  <Page.Main>
</Page>

Components

Page & Section

A wrapper for page content, providing consistent styling and structure. This component will arrange the UI based on the layout regions declared in Page Section.

A semantic wrapper for page areas. Use Page.Header, Page.Aside, Page.Main, and Page.Footer for common layout regions. Add sections inside the Page component to automatically arrange them. Set semantic to true to render components as HTML semantic elements.

Below is an example usage with Sidebar or Appbar. If using both components, ensure that navigation is included in only one—either the sidebar or the appbar.

import { Page, Layout } from '@asphalt-react/layout'
import { Sidebar } from '@asphalt-react/sidebar'
import { Logo } from '@asphalt-react/logo'

<Page>
  <Page.Header>
    <Appbar head={<Logo />} />
  </Page.Header>
  <Page.Main>
    <Layout>
      content
    </Layout>
  <Page.Main>
</Page>

Layout & Slot

A responsive layout container that supports both grid and flexbox, with options for gaps, alignment, templates, and breakpoints. This component provides the following layout types:

• Fluid — Follows the intrinsic width of its children.
• Fill — Distributes available space equally among children.
• Spread — Adds equal spacing between child elements.
• Template — Arranges children according to a template format.

You can nest a Layout component inside another Layout. For best results, place the Layout inside Page.Main, as it relies on container queries that depend on the Main component.

The Slot component is designed for use within Layout. It lets you specify a container area when used with <Layout template>. It also controls the order of items responsively using the order prop. The order prop can be a single number or an object specifying the order for small (s), medium (m), and large (l) breakpoints.

<Layout>
  <Layout.Slot order={{s: -1, m: 1}}></Layout.Slot>
  <Layout.Slot order={-1}></Layout.Slot>
</Layout>

Fluid

This is the default behavior of Layout. It arranges child elements horizontally or vertically, following the intrinsic width or height of their content. By default, items will wrap to a new line when there is not enough space.

<Layout vertical>
  <div style={{width: "200px"}}>content...</div>
  <div>content...</div>
</Layout>

Spread

Spread distributes child elements with equal spacing between them.

<Layout spread>
  <Button>Login</Button>
  <Button>Forgot Password</Button>
</Layout>

Fill

The fill layout ensures that all child elements expand to fill the available space equally. This is especially useful for repetitive items, such as cards or tiles, that should have uniform sizing regardless of their content. On smaller screens, items will stack vertically and take full width. You can override this behaviour by specifying the number of items per row for each breakpoint (e.g., s={2}, m={4}).

// fill the space equally
<Layout fill>
  <div></div>
  <div></div>
  <div></div>
</Layout>

// 2 columns on small screen, 6 columns in medium screen
<Layout fill s={2} m={6}>
  <div></div>
  <div></div>
  <div></div>
  ...
</Layout>

Template

The template layout enables developers to define complex, grid-based arrangements using named areas. Add a line break to indicate new rows. Each child can be assigned to a specific area by setting the area prop on the Slot component. If the s (small) breakpoint is not specified, items will automatically stack vertically and take up 100% width on mobile screens.

const template = 
`analytis analytics summary
category consumer summary`;
const templateResponsive = {
  s: `summary summary
  category customers
  analytics analytics`,
  m: `analytics analytics summary
  customers category summary`,
}

<Layout template={template}>
  <Layout.Slot area="analytics"></Layout.Slot>
  <Layout.Slot area="category"></Layout.Slot>
  <Layout.Slot area="consumer"></Layout.Slot>
  <Layout.Slot area="summary"></Layout.Slot>
</Layout>

Layout

Props

children

React node(s) to render inside the layout container.

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

gap

The gap size between layout items. Accepts 's', 'm', or 'l'. The default is 'm'.

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

align

Align of items along cross-axis: 'start', 'end', 'center', or 'stretch'. Equivalent to CSS align-items.

| type | required | default | | ---- | -------- | ------- | | enum | false | N/A |

placement

Placement of items along the main axis: 'start', 'end', or 'center'. Equivalent to CSS justify-content.

| type | required | default | | ---- | -------- | ------- | | enum | false | N/A |

spread

Adds equal spacing between items.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

vertical

Applies vertical layout. Only works on default Layout and Spread.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

wrap

Enables wrapping of items. Default is true. Only works on default Layout and Spread.

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

reverseOrder

Reverses the order of children items. Only works on default Layout and Spread.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

fill

Fill available space equally.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

s

Number of columns for small screens (used with fill).

| type | required | default | | ------ | -------- | ------- | | number | false | N/A |

m

Number of columns for medium screens (used with fill).

| type | required | default | | ------ | -------- | ------- | | number | false | N/A |

l

Number of columns for large screens (used with fill).

| type | required | default | | ------ | -------- | ------- | | number | false | N/A |

template

Sets layout template areas, as a string or an object with s/m/l keys. Use a line break to indicate new rows. For example: slot1 slot2 \n slot1 slot2 or { s: slot1 \n slot2, m: slot1 slot2 \n slot1 slot2 }

| type | required | default | | ------ | -------- | ------- | | custom | false | "" |

responsiveLayout

Enables responsive Layout which auto adjusts layout based on screen size.

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

Page

Props

children

Components or elements to be rendered inside the Page.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

asideEnd

Aligns Aside component to the end of the container.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |