Blocks are logical units that arrange content on pages. They are rendered (on the page) as the section tag with the height=("100vh"). Blocks are composite elements. They can contain other elements.
import React from 'react';
import ReactDom from 'react-dom';
import { Block, Text } from '@quarkly/elements';
ReactDom.render(
<Block border="2px solid royalblue">
<Text variant="h1" m="0" textAlign="center">
Block
</Text>
</Block>
document.getElementById('root'),
);- variant
- display / d
- height / h
- minHeight / mih
- mixHeight / mah
- width / w
- minWidth / miw
- maxWidth / maw
- size
- verticalAlign / va
- padding / p
- paddingTop / pt
- paddingRight / pr
- paddingBottom / pb
- paddingLeft / pl
- paddingX / px
- paddingY / py
- margin / m
- marginTop / mt
- marginRight / mr
- marginBottom / mb
- marginLeft / ml
- marginX / mx
- marginY / my
- alignItems / ai
- alignContent / ac
- justifyItems / ji
- justifyContent / jc
- flexWrap / fxw
- flexBasis / fxb
- flexDirection / fxd
- flex / fx
- order / ord
- justifySelf / js
- alignSelf / as
- gridGap
- gridColumnGap
- gridRowGap
- gridColumn
- gridRow
- gridAutoFlow
- gridAutoColumns
- gridAutoRows
- gridTemplateColumns
- gridTemplateRows
- gridTemplateAreas
- gridArea
- background / bg
- backgroundColor / bgc
- backgroundImage / bgi
- backgroundSize / bgsz
- backgroundPosition / bgp
- backgroundRepeat / bgr