Text Alignment

Set text alignment

Syntax

visual="text:[alignment]"

Values

Value	CSS Output	Description
left	text-align: left	Left align
center	text-align: center	Center align
right	text-align: right	Right align
justify	text-align: justify	Justify

Examples

<p visual="text:center">Centered text</p>

Preview

Text Alignment

visual="text:center" - Align text within container

left

center

right

View Code

<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div visual="text:left bg:primary text:white rounded:small" space="p:small">left</div>
  <div visual="text:center bg:primary text:white rounded:small" space="p:small">center</div>
  <div visual="text:right bg:primary text:white rounded:small" space="p:small">right</div>
</div>