Text

<Text>Build beautiful user interfaces with VaneUI components. Text provides consistent typography across your application.</Text>

<Col>
  <Text xs>Extra small text</Text>
  <Text sm>Small text for captions</Text>
  <Text>Medium text (default)</Text>
  <Text lg>Large text for emphasis</Text>
  <Text xl>Extra large text</Text>
</Col>

<Row flexWrap>
  <Card primary filled>
    <Text bold>Inherited Primary</Text>
    <Text>This text inherits primary from the Card.</Text>
  </Card>
  <Card success filled>
    <Text bold>Inherited Success</Text>
    <Text>Inherits success color automatically.</Text>
    <Text danger>Explicit danger overrides inherit.</Text>
  </Card>
</Row>

<Col>
  <Text primary>Primary text for important content</Text>
  <Text brand>Brand text for brand-colored content</Text>
  <Text accent>Accent text for highlights</Text>
  <Text secondary>Secondary text for supporting content</Text>
  <Text tertiary>Tertiary text for muted content</Text>
  <Text success>Success text for positive feedback</Text>
  <Text danger>Danger text for errors or warnings</Text>
  <Text warning>Warning text for cautionary messages</Text>
  <Text info>Info text for informational content</Text>
  <Text link>Link-colored text for clickable content</Text>
</Col>

<Col>
  <Text thin>Thin weight</Text>
  <Text light>Light weight</Text>
  <Text normal>Normal weight</Text>
  <Text medium>Medium weight</Text>
  <Text semibold>Semibold weight</Text>
  <Text bold>Bold weight</Text>
  <Text extrabold>Extra bold weight</Text>
  <Text black>Black weight</Text>
</Col>

<Col>
  <Text sans>Sans-serif font (default)</Text>
  <Text serif>Serif font for editorial content</Text>
  <Text mono>Monospace for code or technical content</Text>
</Col>

<Col>
  <Text italic>Italic text for quotes or terms</Text>
  <Text underline>Underlined text for emphasis</Text>
  <Text lineThrough>Line-through for deleted content</Text>
</Col>

<Col>
  <Text uppercase>Uppercase for labels</Text>
  <Text lowercase>LOWERCASE NORMALIZED</Text>
  <Text capitalize>capitalized words example</Text>
</Col>

<Col>
  <Text wFull>Left aligned (default)</Text>
  <Text wFull textCenter>Center aligned</Text>
  <Text wFull textRight>Right aligned</Text>
  <Text wFull textJustify>Justified text spreads to fill the line, distributing extra space between words across the full container width.</Text>
</Col>

<Col>
  <Text wFull truncate>Truncated single line of text that will be cut off with an ellipsis when it exceeds the container width.</Text>
  <Text wFull lineClamp2>Clamped to two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</Text>
  <Text wFull lineClamp3>Clamped to three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
</Col>

<Col>
  <Text trackingTighter>Tighter letter spacing</Text>
  <Text trackingTight>Tight letter spacing</Text>
  <Text trackingNormal>Normal letter spacing (default)</Text>
  <Text trackingWide>Wide letter spacing</Text>
  <Text trackingWider>Wider letter spacing</Text>
  <Text trackingWidest>Widest letter spacing</Text>
</Col>

<Col>
  <Card>
    <Text lg bold>Product Title</Text>
    <Text secondary>Category • 4.5 ★ (128 reviews)</Text>
    <Text>High-quality component library for building modern web applications with React and TypeScript.</Text>
    <Text sm primary semibold>$99.00</Text>
  </Card>
</Col>