<Block />

Block is a layout component for creating block elements.

Usage

Block will render a div by default, creating a block element.

01
02
03
<Block backgroundColor='primary-100' p={4} m={1}> 01 </Block> <Block backgroundColor='primary-100' p={4} m={1}> 02 </Block> <Block backgroundColor='primary-100' p={4} m={1}> 03 </Block>

Usage with refs

If you need to pass a ref to Block, use a RefBlock:

import { useRef } from 'react' import { RefBlock } from 'componentry' function LayoutWithRef() { const ref = useRef(null) return <RefBlock ref={ref} p={4}></RefBlock> }