Web Toolkit

image/svg+xml GitHub

Text: Size 

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-r-xxl:</small>
    <p class="u-text-r-xxl u-margin-top-xs">
        <p class="u-text-r-xxl">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-r-xl:</small>
    <p class="u-text-r-xl u-margin-top-xs">
        <p class="u-text-r-xl">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-r-l:</small>
    <p class="u-text-r-l u-margin-top-xs">
        <p class="u-text-r-l">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-r-m:</small>
    <p class="u-text-r-m u-margin-top-xs">
        <p class="u-text-r-m">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-r-s:</small>
    <p class="u-text-r-s u-margin-top-xs">
        <p class="u-text-r-s">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-r-xs:</small>
    <p class="u-text-r-xs u-margin-top-xs">
        <p class="u-text-r-xs">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-r-xxs:</small>
    <p class="u-text-r-xxs u-margin-top-xs">
        <p class="u-text-r-xxs">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-p:</small>
    <p class="u-text-p u-margin-top-xs">
        <p class="u-text-p">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-h1:</small>
    <p class="u-text-h1 u-margin-top-xs">
        <p class="u-text-h1">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-h2:</small>
    <p class="u-text-h2 u-margin-top-xs">
        <p class="u-text-h2">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-h3:</small>
    <p class="u-text-h3 u-margin-top-xs">
        <p class="u-text-h3">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-h4:</small>
    <p class="u-text-h4 u-margin-top-xs">
        <p class="u-text-h4">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-h5:</small>
    <p class="u-text-h5 u-margin-top-xs">
        <p class="u-text-h5">
            earum rem culpa
        </p>
</section>

<section class="u-layout-prose u-padding-bottom-xxl">
    <small class="u-text-r-xs u-textWeight-400">u-text-h6:</small>
    <p class="u-text-h6 u-margin-top-xs">
        <p class="u-text-h6">
            earum rem culpa
        </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.