UIText

UIText Components

A collection of text components that provide consistent typography styles across the application, with various sizes and weights.

<template>
  <div class="space-y-4">
    <UITextXlMedium>
      Extra Large Medium Text
    </UITextXlMedium>

    <UITextLgMedium>
      Large Medium Text
    </UITextLgMedium>

    <UITextMdMedium>
      Medium Medium Text
    </UITextMdMedium>

    <UITextSmMedium>
      Small Medium Text
    </UITextSmMedium>

    <UITextXlNormal>
      Extra Large Normal Text
    </UITextXlNormal>

    <UITextLgNormal>
      Large Normal Text
    </UITextLgNormal>

    <UITextMdNormal>
      Medium Normal Text
    </UITextMdNormal>

    <UITextSmNormal>
      Small Normal Text
    </UITextSmNormal>
  </div>
</template>

Components

Size Variants

1. Extra Large (XL):

• UITextXlMedium: 20px, medium weight
• UITextXlNormal: 20px, normal weight

2. Large (LG):

• UITextLgMedium: 18px, medium weight
• UITextLgNormal: 18px, normal weight

3. Medium (MD):

• UITextMdMedium: 16px, medium weight
• UITextMdNormal: 16px, normal weight

4. Small (SM):

• UITextSmMedium: 14px, medium weight
• UITextSmNormal: 14px, normal weight

Props

Common props for all text components:

• truncate (boolean): Enable text truncation
• clamp (number): Number of lines to clamp
• as (string): HTML element to render as
• color (string): Text color class
• align (‘left’ | ‘center’ | ‘right’): Text alignment

Usage Examples

1. Basic Text:

<template>
  <UITextLgMedium>
    Section Title
  </UITextLgMedium>
  <UITextSmNormal>
    Section description or content
  </UITextSmNormal>
</template>

2. Truncated Text:

<template>
  <UITextMdNormal
    :truncate="true"
    class="max-w-md"
  >
    This is a very long text that will be truncated when it exceeds the container width
  </UITextMdNormal>
</template>

3. Line Clamping:

<template>
  <UITextMdNormal :clamp="2">
    This is a multi-line text that will be clamped to two lines.
    Any content beyond the second line will be truncated with an
    ellipsis.
  </UITextMdNormal>
</template>

4. Custom Element:

<template>
  <UITextLgMedium as="h2">
    Section Heading
  </UITextLgMedium>
</template>

5. Card Content:

<template>
  <UICard>
    <UITextLgMedium class="mb-2">
      Card Title
    </UITextLgMedium>
    <UITextSmNormal class="text-gray-600">
      Card description or content that provides more details
      about the card's purpose.
    </UITextSmNormal>
  </UICard>
</template>

Best Practices

1. Typography Hierarchy:

   • Use consistent sizes for similar content
   • Maintain clear visual hierarchy
   • Follow design system guidelines
   • Consider content importance

2. Readability:

   • Ensure sufficient contrast
   • Use appropriate line height
   • Consider font scaling
   • Maintain readable lengths

3. Responsive Design:

   • Adjust sizes for mobile
   • Handle text overflow
   • Consider line breaks
   • Use appropriate spacing

4. Accessibility:

   • Use semantic elements
   • Maintain color contrast
   • Support font scaling
   • Consider screen readers

5. Content Structure:

   • Group related text
   • Use consistent spacing
   • Consider content flow
   • Handle dynamic content