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.
breakpoint | min width |
---|---|
xsmall | 31em (496px) |
small | 48em (768px) |
medium | 64em (1024px) |
large | 75em (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