Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Text Alignment 

<div class="container">
    <div class="grid-x">
        <div class="cell">
            <p class="-ta-left">Left</p>
            <p class="-ta-center">Center</p>
            <p class="-ta-right">Right</p>
            <p class="-ta-justify">Justify</p>
        </div>
    </div>
</div>
 
<div class="container">
  <div class="grid-x">
    <div class="cell">
      <p class="-ta-left">Left</p>
      <p class="-ta-center">Center</p>
      <p class="-ta-right">Right</p>
      <p class="-ta-justify">Justify</p>
    </div>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .-ta {
  &-center {
    text-align: center;
  }

  &-left {
    text-align: left;
  }

  &-right {
    text-align: right;
  }

  &-justify {
    text-align: justify;
  }
}
  • URL: /components/raw/text-alignment/_text-alignment.scss
  • Filesystem Path: src/components/03-css-utilities/02-helpers/text-alignment/_text-alignment.scss
  • Size: 172 Bytes
  • Handle: @text-alignment
  • Preview:
  • Filesystem Path: src/components/03-css-utilities/02-helpers/text-alignment/text-alignment.hbs

There are no notes for this item.