Text: Default

WIP

HTML
Assets
Info
Notes


        
        <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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </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">
        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
        et perferendis.
    </p>
</section>

File:

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

Handle: @text--default
Variants (2): Default , Size
Preview:
- With layout
- Component only
Filesystem Path: src/utils/text/text.tmpl

There are no notes for this item.