sutter/helloFront

extends ../../../layout/styleguide

append config
  - var template = 't-styleguide'
  - var title = "Utils de texte"
  - var metaDesc = "Utils de texte - CSS"
  - var path = './../../'

block content
  .hf-head
    .hf-wrapper
      h1 Text
  .hf-content.hf-wrapper
    h2 Documentation
    p Les utilitaires de texte permettent de modifier les styles de texte des éléments.
  .hf-content.hf-wrapper
    h3 Modification de style
    table
      thead
        tr
          th Class
          th Usage
      tbody
        tr
          td
            code .u-text-upper
          td.u-text-upper Texte tout en capitales
        tr
          td
            code .u-text-lower
          td.u-text-lower Texte tout en minuscules
        tr
          td
            code .u-text-bold
          td.u-text-bold Texte tout en gras
        tr
          td
            code .u-text-thin
          td.u-text-thin Texte tout en light
        tr
          td
            code .u-text-center
          td.u-text-center Texte centré
        tr
          td
            code .u-text-left
          td.u-text-left Texte aligné à droite
        tr
          td
            code .u-text-right
          td.u-text-right Texte aligné à gauche
  .hf-content.hf-wrapper
    h3 Modification de taille
    table
      thead
        tr
          th Class
          th Usage
      tbody
        tr
          td
            code .u-text-xxl
          td.u-text-xxl Lorem ipsum
        tr
          td
            code .u-text-xl
          td.u-text-xl Lorem ipsum
        tr
          td
            code .u-text-l
          td.u-text-l Lorem ipsum
        tr
          td
            code .u-text-m
          td.u-text-m Lorem ipsum
        tr
          td
            code .u-text-s
          td.u-text-s Lorem ipsum
        tr
          td
            code .u-text-xs
          td.u-text-xs Lorem ipsum
        tr
          td
            code .u-text-xxs
          td.u-text-xxs Lorem ipsum