Text Alignment

Atomic Props for controlling the alignment of text.

Atomic Props	CSS Properties
textLeft	text-align: left;
textCenter	text-align: center;
textRight	text-align: right ;
textJustify	text-align: justify;
textAlign={value}	text-align: {value};

Usage

Use textLeft, textCenter, textRight, textJustify to control the alignment of the text.

Result

Loading...

Live Editor

<Box textXL> <Box textLeft>Lorem ipsum dolor sit amet</Box> <Box textCenter>Lorem ipsum dolor sit amet</Box> <Box textRight>Lorem ipsum dolor sit amet</Box> <Box textJustify>Lorem ipsum dolor sit amet</Box> </Box>

<Box textXL>
  <Box textLeft>Lorem ipsum dolor sit amet</Box>
  <Box textCenter>Lorem ipsum dolor sit amet</Box>
  <Box textRight>Lorem ipsum dolor sit amet</Box>
  <Box textJustify>Lorem ipsum dolor sit amet</Box>
</Box>

textAlign Prop

Result

Loading...

Live Editor

<Box textXL> <Box textAlign="center">Lorem ipsum dolor sit amet</Box> <Box textAlign={2 > 0 ? 'right' : 'left'}>Lorem ipsum dolor sit amet</Box> </Box>

<Box textXL>
  <Box textAlign="center">Lorem ipsum dolor sit amet</Box>
  <Box textAlign={2 > 0 ? 'right' : 'left'}>Lorem ipsum dolor sit amet</Box>
</Box>