extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'text'
  - var parent = 'utilities'
  - var title = 'Text utilities - Utilities - Spectre.css CSS Framework'
  - var description = 'Text utilities are used for text alignment, styles and overflow things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('text', 'Text utilities')
    include ../_layout/_ad-g.pug

    p Text utilities are used for text alignment, styles and overflow things.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- left-aligned text -->
          <div class="text-left"></div>
          <!-- center-aligned text -->
          <div class="text-center"></div>
          <!-- right-aligned text -->
          <div class="text-right"></div>
          <!-- justified text -->
          <div class="text-justify"></div>

          <!-- Lowercased text -->
          <div class="text-lowercase"></div>
          <!-- Uppercased text -->
          <div class="text-uppercase"></div>
          <!-- Capitalized text -->
          <div class="text-capitalize"></div>

          <!-- Normal weight text -->
          <div class="text-normal"></div>
          <!-- Bold text -->
          <div class="text-bold"></div>
          <!-- Italicized text -->
          <div class="text-italic"></div>
          <!-- Larger text (120%) -->
          <div class="text-large"></div>

          <!-- Overflow behavior: display an ellipsis to represent clipped text -->
          <div class="text-ellipsis"></div>
          <!-- Overflow behavior: truncate the text -->
          <div class="text-clip"></div>
          <!-- Text may be broken at arbitrary points -->
          <div class="text-break"></div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug