Text

<p class="velin-text-start">Start aligned (left in LTR)</p>
<p class="velin-text-center">Center aligned</p>
<p class="velin-text-end">End aligned (right in LTR)</p>
<!-- Responsive -->
<p class="velin-text-center velin-text-md-start">Center on mobile, start on md+</p>

<p class="velin-fs-1">Font size 1 (2.5rem)</p>
<p class="velin-fs-2">Font size 2 (2rem)</p>
<p class="velin-fs-3">Font size 3 (1.75rem)</p>
<p class="velin-fs-4">Font size 4 (1.5rem)</p>
<p class="velin-fs-5">Font size 5 (1.25rem)</p>
<p class="velin-fs-6">Font size 6 (1rem)</p>

<p class="velin-fw-light">Light (300)</p>
<p class="velin-fw-normal">Normal (400)</p>
<p class="velin-fw-medium">Medium (500)</p>
<p class="velin-fw-semibold">Semibold (600)</p>
<p class="velin-fw-bold">Bold (700)</p>
<p class="velin-fst-italic">Italic</p>
<p class="velin-fst-normal">Normal style</p>

<p class="velin-text-decoration-underline">Underlined</p>
<p class="velin-text-decoration-line-through">Strikethrough</p>
<p class="velin-text-decoration-none">No decoration</p>
<p class="velin-text-uppercase">Uppercase text</p>
<p class="velin-text-lowercase">LOWERCASE TEXT</p>
<p class="velin-text-capitalize">capitalized text</p>

<p class="velin-text-wrap">Normal wrapping</p>
<p class="velin-text-nowrap">No wrapping</p>
<p class="velin-text-break">Break long words</p>
<p class="velin-text-truncate" style="max-width: 200px">
  This long text will be truncated with an ellipsis
</p>

<p class="velin-font-sans">Sans-serif (default)</p>
<p class="velin-font-serif">Serif font</p>
<p class="velin-font-mono">Monospace font</p>