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

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

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

Responsive examples

Resize the browser to see the effect.

Content

Props

prop
type
default
alignment
oneOfType
oneOf: : "topLeft", "topCenter", "topRight", "centerLeft", "center", "centerRight", "bottomLeft", "bottomCenter", "bottomRight"
array
object
'center'
htmlTag
oneOf: 'div', 'header', 'article', 'section', 'nav', 'aside', 'footer', 'main'
'div'
children
node
required