Layout

Visual guidelines are available in our Figma library here.

There are two types of layout components in ink:

Grid components are used to define page layout grid:

Spacing components are used to control spacing around and between components:

How grid and spacing components are used to define a basic page layout and set gap spacing between content tiles in a horizontal stack:

<Grid>
  <Row>
    <Column
      mobile="12-of-12"
      tabletLandscape="8-of-12"
      offsetTabletLandscape="2-of-12"
      desktopLarge="6-of-12"
      offsetDesktopLarge="3-of-12"
    >
      <HStack spacing="gutter">
        <Tile>Content tile 1</Tile>
        <Tile>Content tile 1</Tile>
        <Tile>Content tile 1</Tile>
      </HStack>
    </Column>
  </Row>
</Grid>

ink primer is the quickest and easiest way to get started using grid components. Refer to the page layout guidelines for recommendations on grid configurations in different scenarios.

The two markups below produce identical visuals:

<VStack spacing="gutter">
  <Banner text="This is a banner text" trim />
  <Block title="Title" trim>
    Content
  </Block>
  <CustomText>Text</CustomText>
</VStack>

<Banner text="This is a banner text" />
<Block title="Title">
    Content
</Block>
<CustomText>Text</CustomText>

ink primer is the quickest and easiest way to get started with responsive layout, but you can easily customize grid layout or spacing for each of ink's breakpoints:

Use Column's properties for grid allocation and grid offset to customize page layout.

<Grid>
  <Row>
    <Column
      mobile="12-of-12"
      tabletLandscape="9-of-12"
      offsetTabletLandscape="3-of-12"
      desktop="8-of-12"
      desktopLarge="5-of-12"
      offsetDesktopLarge="4-of-12"
    >
      Header
    </Column>
  </Row>
  <Row>
    <Column
      mobile="12-of-12"
      tabletLandscape="3-of-12"
      desktop="2-of-12"
      offsetDesktop="1-of-12"
      offsetDesktopLarge="2-of-12"
    >
      Navigation
    </Column>
    <Column mobile="12-of-12" tabletLandscape="5-of-12" desktop="5-of-12" desktopLarge="3-of-12">
      Content
    </Column>
    <Column mobile="hidden" tabletLandscape="4-of-12" desktop="3-of-12" desktopLarge="2-of-12">
      Accessory
    </Column>
  </Row>
  <Row>
    <Column
      mobile="12-of-12"
      tabletLandscape="9-of-12"
      offsetTabletLandscape="3-of-12"
      desktop="8-of-12"
      desktopLarge="5-of-12"
      offsetDesktopLarge="4-of-12"
    >
      Footer
    </Column>
  </Row>
</Grid>

The layout and spacing properties of VStack, HStack, Tiles, and Box are responsive properties so an array of properties can be provided to be mapped to different breakpoints.

Use gutter as HStack's gap spacing for tabletLandscape and up, and medium for everything below

<HStack spacing={["medium", null, "gutter"]}>
  <Tile>Tile 1</Tile>
  <Tile>Tile 2</Tile>
  <Tile>Tile 3</Tile>
</HStack>

Use gutter as HStack's gap spacing for tabletLandscape and up, medium for tabletPortrait, and small for mobile

<HStack spacing={["small", "medium", "gutter"]}>
  <Tile>Tile 1</Tile>
  <Tile>Tile 2</Tile>
  <Tile>Tile 3</Tile>
</HStack>

The useWindowWidth hook provides breakpoint booleans for custom responsive logic.

const { isMobile, isTabletPortrait, isTabletLandscape, isDesktop, isDesktopLarge } = useWindowWidth()

In components like Tiles, the prop columns accepts an array that maps to:

[isMobile, isTabletPortrait, isTabletLandscape, isDesktop, isDesktopLarge]

This means setting columns={[1, 2, 3, 4, 5]} will display

Additional, the Box component works as a wrapper and provides extended access to layout properties. However this should be used very sparingly!