Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Toast Tooltip
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

Align

Content

Usage

import { Align } from '@loomhq/lens'
<Align>Content</Align>

Alignments

<DemoBox>
  <Arrange columns="repeat(3, 1fr)" alignItems="stretch">
    {availableAlignments.map((alignment, index) => (
      <Container
        key={index}
        padding="small"
        borderColor="background"
        borderSide="all"
        minHeight={10}
      >
        <Align alignment={alignment}>
          {alignment}
        </Align>
      </Container>
    ))}
  </Arrange>
</DemoBox>

<DemoBox>
  <Arrange columns="repeat(3, 1fr)" alignItems="stretch">
    {availableAlignments.map((alignment, index) => (
      <Container
        key={index}
        padding="small"
        borderColor="background"
        borderSide="all"
        minHeight={10}
      >
        <Align alignment={alignment}>
          {alignment}
        </Align>
      </Container>
    ))}
  </Arrange>
</DemoBox>

Examples

Icon alignments in a Container

<Arrange>
  <Container height={8} width={8} borderSide="all">
    <Align alignment="centerRight">
      <Icon icon={<SvgArrowForward />} />
    </Align>
  </Container>
  <Container height={8} width={8} borderSide="all">
    <Align alignment="center">
      <Icon icon={<SvgFiberManualRecord />} />
    </Align>
  </Container>
  <Container height={8} width={8} borderSide="all">
    <Align alignment="bottomLeft">
      <Icon icon={<SvgClose />} />
    </Align>
  </Container>
</Arrange>

<Arrange>
  <Container height={8} width={8} borderSide="all">
    <Align alignment="centerRight">
      <Icon icon={<SvgArrowForward />} />
    </Align>
  </Container>
  <Container height={8} width={8} borderSide="all">
    <Align alignment="center">
      <Icon icon={<SvgFiberManualRecord />} />
    </Align>
  </Container>
  <Container height={8} width={8} borderSide="all">
    <Align alignment="bottomLeft">
      <Icon icon={<SvgClose />} />
    </Align>
  </Container>
</Arrange>

Semantic HTML

Use htmlTag prop to render a more suited element tag. Only default to div if no other element works better. More about Html5 Semantic Elements.

Responsive props

See available responsive props

For responsive props pass an object where the key is the min-width breakpoint.

prop={{
  default: 'xsmall',
  xsmall: 'xsmall',
  small: 'xsmall',
  medium: 'large',
  large: 'xlarge',
}}

Custom breakpoint

prop={{
  '12em': 'xsmall',
  '28em': 'large',
}}

Available breakpoints

breakpoint	min width
`xsmall`	`31em (496px)`
`small`	`48em (768px)`
`medium`	`64em (1024px)`
`large`	`75em (1200px)`

Responsive examples

Resize the browser to see the effect.

<DemoBox width="100%" height={20}>
  <Align
    alignment={{
      'default': 'bottomRight',
      'xsmall': 'bottomRight',
      'small': 'center',
      'medium': 'topCenter',
      'large': 'centerRight'
    }}
  >
    Content
  </Align>
</DemoBox>

<DemoBox width="100%" height={20}>
  <Align
    alignment={{
      'default': 'bottomRight',
      'xsmall': 'bottomRight',
      'small': 'center',
      'medium': 'topCenter',
      'large': 'centerRight'
    }}
  >
    Content
  </Align>
</DemoBox>

Props

name

type

default

alignment

ResponsiveType

'center'

responsive

htmlTag

'div'

children

React.ReactNode

required

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground