extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'text'
  - var parent = 'utilities'
  - var title = 'Text utilities - Utilities - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

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