<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textSmooth:</small>
    <p class="u-textSmooth u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textClean:</small>
    <p class="u-textClean u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textWeight-400:</small>
    <p class="u-textWeight-400 u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textWeight-600:</small>
    <p class="u-textWeight-600 u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textWeight-700:</small>
    <p class="u-textWeight-700 u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textNormal:</small>
    <p class="u-textNormal u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textSecondary:</small>
    <p class="u-textSecondary u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textItalic:</small>
    <p class="u-textItalic u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-textPreformatted:</small>
    <p class="u-textPreformatted u-margin-top-xs">
        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
    </p>
</section>
  • Content:
    /** @define utilities */
    
    @import "./text.css";
    @import "./text-sm.css";
    @import "./text-md.css";
    @import "./text-lg.css";
    @import "./lineheight.css";
    
    :root {
      --Text-color-text-primary: #333;
      --Text-color-text-secondary: #5a6772;
      --Text-preFormatted-font:
        Consolas,
        "Andale Mono WT",
        "Andale Mono",
        "Lucida Console",
        "Lucida Sans Typewriter",
        "DejaVu Sans Mono",
        "Bitstream Vera Sans Mono",
        "Liberation Mono",
        "Nimbus Mono L",
        Monaco,
        "Courier New",
        Courier,
        monospace;
    }
    
    .u-textSecondary {
      color: var(--Text-color-text-secondary) !important;
    }
    
    /*
     * 	1. antialiasing firefox per mac
     * 	2. antialiasing chrome, safari per mac
     */
    
    .u-textSmooth {
      -moz-osx-font-smoothing: grayscale !important; /* 1 */
      -webkit-font-smoothing: antialiased !important; /* 2 */
    }
    
    .u-textClean {
      text-decoration: none !important;
    }
    
    .u-textClean:hover {
      text-decoration: underline !important;
    }
    
    .u-textWeight-200 {
      font-weight: 200 !important;
    }
    
    .u-textWeight-300 {
      font-weight: 300 !important;
    }
    
    .u-textWeight-400 {
      font-weight: 400 !important;
    }
    
    .u-textWeight-600 {
      font-weight: 600 !important;
    }
    
    .u-textWeight-700 {
      font-weight: 700 !important;
    }
    
    .u-textWeight-900 {
      font-weight: 900 !important;
    }
    
    .u-textNormal {
      font-style: normal !important;
    }
    
    .u-textItalic {
      font-style: italic !important;
    }
    
    .u-textLowercase {
      text-transform: lowercase !important;
    }
    
    .u-textUppercase {
      text-transform: uppercase !important;
    }
    
    .u-textSmallCaps {
      font-variant: small-caps !important;
    }
    
    .u-textPreformatted {
      font-family: var(--Text-preFormatted-font) !important;
    }
    
    .u-textOverflow {
      overflow-x: auto !important;
    }
    
    /*
     *	Responsive font sizing
     * 	====================================
     */
    
    .u-text-r-xxl {
      @extend .u-text-xxl;
      @extend .u-text-sm-xxl;
      @extend .u-text-lg-xxl;
      @extend .u-text-md-xxl;
    }
    
    .u-text-r-xl {
      @extend .u-text-xl;
      @extend .u-text-sm-xl;
      @extend .u-text-lg-xl;
      @extend .u-text-md-xl;
    }
    
    .u-text-r-l {
      @extend .u-text-l;
      @extend .u-text-sm-l;
      @extend .u-text-lg-l;
      @extend .u-text-md-l;
    }
    
    .u-text-r-m {
      @extend .u-text-m;
      @extend .u-text-sm-m;
      @extend .u-text-lg-m;
      @extend .u-text-md-m;
    }
    
    .u-text-r-s {
      @extend .u-text-s;
      @extend .u-text-sm-s;
      @extend .u-text-lg-s;
      @extend .u-text-md-s;
    }
    
    .u-text-r-xs {
      @extend .u-text-xs;
      @extend .u-text-sm-xs;
      @extend .u-text-lg-xs;
      @extend .u-text-md-xs;
    }
    
    .u-text-r-xxs {
      @extend .u-text-xxs;
      @extend .u-text-sm-xxs;
      @extend .u-text-lg-xxs;
      @extend .u-text-md-xxs;
    }
    
    .u-text-p {
      @extend .u-text-r-xs;
      @extend .u-lineHeight-xl;
    }
    
    /*
     *	Heading - set default margins
     * 	=====================================
     */
    
    .u-text-h1 {
      @extend .u-text-r-xxl;
      @extend .u-textWeight-700;
      @extend .u-margin-bottom-s;
      @extend .u-lineHeight-m;
    }
    
    .u-text-h2 {
      @extend .u-text-r-xl;
      @extend .u-textWeight-700;
      @extend .u-margin-bottom-s;
      @extend .u-lineHeight-m;
    }
    
    .u-text-h3 {
      @extend .u-text-r-l;
      @extend .u-textWeight-700;
      @extend .u-margin-bottom-s;
      @extend .u-lineHeight-m;
    }
    
    .u-text-h4 {
      @extend .u-text-r-m;
      @extend .u-textWeight-700;
      @extend .u-margin-bottom-s;
    }
    
    .u-text-h5 {
      @extend .u-text-r-s;
      @extend .u-textWeight-400;
      @extend .u-margin-bottom-s;
      @extend .u-textSecondary;
    }
    
    .u-text-h6 {
      @extend .u-text-r-xs;
      @extend .u-textWeight-700;
      @extend .u-margin-bottom-s;
    }
    
  • URL: /components/raw/text/index.css
  • Filesystem Path: src/utils/text/index.css
  • Size: 3.4 KB
  • Content:
    .u-lineHeight-xxs {
      line-height: 0.1 !important;
    }
    
    .u-lineHeight-xs {
      line-height: 0.5 !important;
    }
    
    .u-lineHeight-s {
      line-height: 1 !important;
    }
    
    .u-lineHeight-m {
      line-height: 1.2 !important;
    }
    
    .u-lineHeight-l {
      line-height: 1.4 !important;
    }
    
    .u-lineHeight-xl {
      line-height: 1.55 !important;
    }
    
  • URL: /components/raw/text/lineheight.css
  • Filesystem Path: src/utils/text/lineheight.css
  • Size: 314 Bytes
  • Content:
    /** @define utilities; */
    
    @media (--lg-viewport) {
    
      .u-text-lg-xxl {
        font-size: 5.4rem !important;
      }
    
      .u-text-lg-xl {
        font-size: 4rem !important;
      }
    
      .u-text-lg-l {
        font-size: 3.2rem !important;
      }
    
      .u-text-lg-m {
        font-size: 2.3rem !important;
        letter-spacing: 0.007em !important;
      }
    
      .u-text-lg-s {
        font-size: 2.1rem !important;
        letter-spacing: 0.005em !important;
      }
    
      .u-text-lg-xs {
        font-size: 1.8rem !important;
        letter-spacing: 0.01em !important;
      }
    
      .u-text-lg-xxs {
        font-size: 1.5rem !important;
      }
    
      .u-text-lg-center {
        text-align: center !important;
      }
    
      .u-text-lg-left {
        text-align: left !important;
      }
    
      .u-text-lg-right {
        text-align: right !important;
      }
    }
    
  • URL: /components/raw/text/text-lg.css
  • Filesystem Path: src/utils/text/text-lg.css
  • Size: 749 Bytes
  • Content:
    /** @define utilities; */
    
    @media (--md-viewport) {
    
      .u-text-md-xxl {
        font-size: 4.4rem !important;
      }
    
      .u-text-md-xl {
        font-size: 3.6rem !important;
      }
    
      .u-text-md-l {
        font-size: 2.8rem !important;
      }
    
      .u-text-md-m {
        font-size: 2.1rem !important;
        letter-spacing: 0.007em !important;
      }
    
      .u-text-md-s {
        font-size: 2.1rem !important;
        letter-spacing: 0.005em !important;
      }
    
      .u-text-md-xs {
        font-size: 1.8rem !important;
        letter-spacing: 0.01em !important;
      }
    
      .u-text-md-xxs {
        font-size: 1.5rem !important;
      }
    
      .u-text-md-center {
        text-align: center !important;
      }
    
      .u-text-md-left {
        text-align: left !important;
      }
    
      .u-text-md-right {
        text-align: right !important;
      }
    }
    
  • URL: /components/raw/text/text-md.css
  • Filesystem Path: src/utils/text/text-md.css
  • Size: 751 Bytes
  • Content:
    /** @define utilities; */
    
    @media (--sm-viewport) {
    
      .u-text-sm-xxl {
        font-size: 3.2rem !important;
      }
    
      .u-text-sm-xl {
        font-size: 3rem !important;
      }
    
      .u-text-sm-l {
        font-size: 2.4rem !important;
      }
    
      .u-text-sm-m {
        font-size: 2.1rem !important;
        letter-spacing: 0.007em !important;
      }
    
      .u-text-sm-s {
        font-size: 2rem !important;
        letter-spacing: 0.005em !important;
      }
    
      .u-text-sm-xs {
        font-size: 1.8rem !important;
        letter-spacing: 0.01em !important;
      }
    
      .u-text-sm-xxs {
        font-size: 1.5rem !important;
      }
    
      .u-text-sm-center {
        text-align: center !important;
      }
    
      .u-text-sm-left {
        text-align: left !important;
      }
    
      .u-text-sm-right {
        text-align: right !important;
      }
    }
    
  • URL: /components/raw/text/text-sm.css
  • Filesystem Path: src/utils/text/text-sm.css
  • Size: 747 Bytes
  • Content:
    /** @define utilities; */
    
    .u-text-xxl {
      font-size: 3.2rem !important;
    }
    
    .u-text-xl {
      font-size: 2.8rem !important;
    }
    
    .u-text-l {
      font-size: 2.2rem !important;
    }
    
    .u-text-m {
      font-size: 2rem !important;
      letter-spacing: 0.007em !important;
    }
    
    .u-text-s {
      font-size: 1.8rem !important;
      letter-spacing: 0.005em !important;
    }
    
    .u-text-xs {
      font-size: 1.6rem !important;
      letter-spacing: 0.01em !important;
    }
    
    .u-text-xxs {
      font-size: 1.4rem !important;
    }
    
  • URL: /components/raw/text/text.css
  • Filesystem Path: src/utils/text/text.css
  • Size: 472 Bytes

There are no notes for this item.