Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

Playground

Layout recipes
Showcase

Align

Content

Usage

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

Alignments

topLeft

topCenter

topRight

centerLeft

center

centerRight

bottomLeft

bottomCenter

bottomRight

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

Content

<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

prop

type

default

alignment

oneOfType

oneOf: : "topLeft", "topCenter", "topRight", "centerLeft", "center", "centerRight", "bottomLeft", "bottomCenter", "bottomRight"

array

object

'center'

Responsive

htmlTag

oneOf: 'div', 'header', 'article', 'section', 'nav', 'aside', 'footer', 'main'

'div'

children

node

required