Content

Usage

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

Alignments

topLeft
topCenter
topRight
centerLeft
center
centerRight
bottomLeft
bottomCenter
bottomRight

Examples

Icon alignments in a Container

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.

breakpointmin width
xsmall31em (496px)
small48em (768px)
medium64em (1024px)
large75em (1200px)

Alignment responsive demo

Resize the browser

Content

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