<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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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">
        Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam quo distinctio.
    </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.