Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

CSS utilities
CSS variables

Align

Content

Usage

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

Alignments

topLeft

topCenter

topRight

centerLeft

center

centerRight

bottomLeft

bottomCenter

bottomRight

<DemoBox>
  <div style={{
    display: 'grid',
    gridTemplateColumns: '1fr 1fr 1fr',
    textAlign: 'center',
  }}>
    {availableAlignments.map((alignment, index) => (
      <Container
        key={index}
        padding="medium"
        borderColor="background"
        borderSide="all"
      >
        {alignment}
      </Container>
    ))}
  </div>
</DemoBox>

<DemoBox>
  <div style={{
    display: 'grid',
    gridTemplateColumns: '1fr 1fr 1fr',
    textAlign: 'center',
  }}>
    {availableAlignments.map((alignment, index) => (
      <Container
        key={index}
        padding="medium"
        borderColor="background"
        borderSide="all"
      >
        {alignment}
      </Container>
    ))}
  </div>
</DemoBox>

Examples

Icon alignments in a Container

<Distribute>
  <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>
</Distribute>

<Distribute>
  <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>
</Distribute>

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

Use an array with a maximum of 4 values that will be paired with the 4 breakpoints. The array items use the same type of values as their corresponding non-responsive values.

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

Alignment responsive demo

Resize the browser

Content

<DemoBox width="100%" height={20}>
  <Align alignment={['bottomRight', 'center', 'topCenter', 'centerRight']}>
    Content
  </Align>
</DemoBox>

<DemoBox width="100%" height={20}>
  <Align alignment={['bottomRight', 'center', 'topCenter', 'centerRight']}>
    Content
  </Align>
</DemoBox>

Props

prop

type

default

required

alignment

oneOfType

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

array

'center'

htmlTag

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

'div'

children

node

required