@highlight-ui/layout

@highlight-ui/layout

Layout components are used to manage the white space between components and other elements. They produce visual consistency across Personio products by using a limited set of standardised spacing tokens. This also removes the hassle of space-management from the user.

Installation

yarn add @highlight-ui/layout

Stack

The Stack component manages the vertical spacing between elements.

Usage

In your TypeScript file:

import { Stack, StackProps } from '@highlight-ui/layout';

In your (S)CSS file:

@import url('@highlight-ui/layout');

<Stack space="spacing-4">
  <Placeholder>Item 1</Placeholder>
  <Placeholder>Item 2</Placeholder>
  <Placeholder>Item 3</Placeholder>
</Stack>

Props

Prop	Type	Default	Description
space	SpacingType	spacing-0	The spacing applied to the children.

Inline

The Inline component manages the horizontal spacing between elements. In addition to this, this component can also control the alignment of the items (both vertically and horizontally).

Usage

In your TypeScript file:

import { Inline, InlineProps } from '@highlight-ui/layout';

In your (S)CSS file:

@import url('@highlight-ui/layout');

<Inline space="spacing-4" align="center">
  <Placeholder>Item 1</Placeholder>
  <Placeholder>Item 2</Placeholder>
  <Placeholder>Item 3</Placeholder>
  <Placeholder>Item 4</Placeholder>
  <Placeholder>Item 5</Placeholder>
</Inline>

Props

Prop	Type	Default	Description
space	SpacingType	spacing-0	The spacing applied to the children.
align	AlignmentType	start	Horizontal alignment of the items.
alignVertical	AlignmentType	start	Vertical alignment of the items.
wrap	boolean	true	Whether to wrap the items when their width exceeds the container width.

Types

Type	Values
SpacingType	spacing-0, spacing-0-5, spacing-1, spacing-2, spacing-3, spacing-4, spacing-5, spacing-6, spacing-8, spacing-10, spacing-12, spacing-16, spacing-20, spacing-24, spacing-32
AlignmentType	start, center, end

Documentation

Please visit personio.design