Typography

Typography utility classes allow you to quickly set an element’s font size, weight, color, and case in accordance with design guidelines. SASS variables and mixins are provided for most utilities as well. See the demo above for examples.

Responsive versions are provided for text sizing, heading, uppercase utilities. The formats are:

.text-[value]-[breakpoint]
.h[value]-[breakpoint]
.uppercase-[value]-[breakpoint]

Above, value is a number (as shown in the demo), and the breakpoint suffix specifies the minimum screen size to apply the rule. For example, .text-2.text-3-md would render as 14px at xs and sm sizes and 16px at md and up.

Note: this feature is enabled by default and adds 344 lines of CSS (approx 10kb) to the compiled CSS. You can toggle it off by setting $enable-type-utilities: false before importing Phenotypes.

Related:

<div>
    <h4>Text and heading sizes</h4>
    <div class="d-flex-sm">
        <div class="mr7-sm">
            <p><code class="text-color-hint">.text-1<br/>@include text-1</code>
            </p>
            <p class="text-1">Regular 12px</p>
            <hr/>
            <p><code class="text-color-hint">.text-2<br/>@include text-2</code>
            </p>
            <p class="text-2">Regular 14px</p>
            <hr/>
            <p><code class="text-color-hint">.text-3<br/>@include text-3</code>
            </p>
            <p class="text-3">Regular 16px</p>
            <hr/>
            <p><code class="text-color-hint">.text-4<br/>@include text-4</code>
            </p>
            <p class="text-4">Regular 18px</p>
            <hr/>
            <p><code class="text-color-hint">.text-5<br/>@include text-5</code>
            </p>
            <p class="text-5">Regular 21px</p>
            <hr/>
            <p><code class="text-color-hint">.text-6<br/>@include text-6</code>
            </p>
            <p class="text-6">Regular 24px</p>
            <hr/>
            <p><code class="text-color-hint">.text-7<br/>@include text-7</code>
            </p>
            <p class="text-7">Regular 36px</p>
            <hr/>
            <p><code class="text-color-hint">.text-8<br/>@include text-8</code>
            </p>
            <p class="text-8">Regular 53px</p>
        </div>
        <div>
            <p><code class="text-color-hint">.text-1.text-weight-bold<br/>@include text-1($font-weight-bold)</code>
            </p>
            <p class="text-1 text-weight-bold">Bold 12px</p>
            <hr/>
            <p><code class="text-color-hint">.text-2.text-weight-bold<br/>@include text-2($font-weight-bold)</code>
            </p>
            <p class="text-2 text-weight-bold">Bold 14px</p>
            <hr/>
            <p><code class="text-color-hint">h6, .h6<br/>@include text-3($font-weight-bold)</code>
            </p>
            <p class="h6">Bold 16px</p>
            <hr/>
            <p><code class="text-color-hint">h5, .h5<br/>@include text-4($font-weight-bold)</code>
            </p>
            <p class="h5">Bold 18px</p>
            <hr/>
            <p><code class="text-color-hint">h4, .h4<br/>@include text-5($font-weight-bold)</code>
            </p>
            <p class="h4">Bold 21px</p>
            <hr/>
            <p><code class="text-color-hint">h3, .h3<br/>@include text-6($font-weight-bold)</code>
            </p>
            <p class="h3">Bold 24px</p>
            <hr/>
            <p><code class="text-color-hint">h2, .h2<br/>@include text-7($font-weight-bold)</code>
            </p>
            <p class="h2">Bold 36px</p>
            <hr/>
            <p><code class="text-color-hint">h1, .h1<br/>@include text-8($font-weight-bold)</code>
            </p>
            <p class="h1">Bold 53px</p>
        </div>
    </div>
    <hr class="my7" />
    <h4>Uppercase</h4>
    <p><code class="text-color-hint">.uppercase-1<br/>@include uppercase-1</code>
    </p>
    <p class="uppercase-1">Uppercase 9px</p>
    <hr/>
    <p><code class="text-color-hint">.uppercase-2<br/>@include uppercase-2</code>
    </p>
    <p class="uppercase-2">Uppercase 11px</p>
    <hr/>
    <p><code class="text-color-hint">.uppercase-3<br/>@include uppercase-3</code>
    </p>
    <p class="uppercase-3">Uppercase 12px</p>
    <hr class="my7" />
    <h4>Colors</h4>
    <div class="d-flex flex-wrap">
        <div class="mr7-sm p5">
            <p><code class="text-color-hint">.text-color-primary<br/>$text-color-primary</code>
            </p>
            <p class="text-color-primary">◼︎ Primary color</p>
            <hr/>
            <p><code class="text-color-hint">.text-color-secondary<br/>$text-color-secondary</code>
            </p>
            <p class="text-color-secondary">◼︎ Secondary color</p>
            <hr/>
            <p><code class="text-color-hint">.text-color-hint<br/>$text-color-hint</code>
            </p>
            <p class="text-color-hint">◼︎ Hint color</p>
        </div>
        <div class="p5" style="background:#232323;">
            <p><code class="text-color-reversed-hint">.text-color-reversed-primary<br/>$text-color-reversed-primary</code>
            </p>
            <p class="text-color-reversed-primary">◼︎ Reversed primary color</p>
            <hr class="hr-reversed" />
            <p><code class="text-color-reversed-hint">.text-color-reversed-secondary<br/>$text-color-reversed-secondary</code>
            </p>
            <p class="text-color-reversed-secondary">◼︎ Reversed secondary color</p>
            <hr class="hr-reversed" />
            <p><code class="text-color-reversed-hint">.text-color-reversed-hint<br/>$text-color-reversed-hint</code>
            </p>
            <p class="text-color-reversed-hint">◼︎ Reversed hint color</p>
        </div>
    </div>
    <div class="d-flex flex-wrap mt5">
        <div class="mr7-sm p5">
            <p><code class="text-color-hint">.text-color-orange $orange</code>
            </p>
            <p class="text-color-orange">◼︎ orange</p>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-orange-100 $orange-100</code>
                </p>
                <p class="text-color-orange-100">◼︎ orange 100</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-orange-200 $orange-200</code>
                </p>
                <p class="text-color-orange-200">◼︎ orange 200</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-orange-300 $orange-300</code>
                </p>
                <p class="text-color-orange-300">◼︎ orange 300</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-orange-400 $orange-400</code>
                </p>
                <p class="text-color-orange-400">◼︎ orange 400</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-orange-500 $orange-500</code>
                </p>
                <p class="text-color-orange-500">◼︎ orange 500</p>
            </div>
        </div>
        <div class="mr7-sm p5">
            <p><code class="text-color-hint">.text-color-red $red</code>
            </p>
            <p class="text-color-red">◼︎ red</p>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-red-100 $red-100</code>
                </p>
                <p class="text-color-red-100">◼︎ red 100</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-red-200 $red-200</code>
                </p>
                <p class="text-color-red-200">◼︎ red 200</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-red-300 $red-300</code>
                </p>
                <p class="text-color-red-300">◼︎ red 300</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-red-400 $red-400</code>
                </p>
                <p class="text-color-red-400">◼︎ red 400</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-red-500 $red-500</code>
                </p>
                <p class="text-color-red-500">◼︎ red 500</p>
            </div>
        </div>
        <div class="mr7-sm p5">
            <p><code class="text-color-hint">.text-color-purple $purple</code>
            </p>
            <p class="text-color-purple">◼︎ purple</p>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-purple-100 $purple-100</code>
                </p>
                <p class="text-color-purple-100">◼︎ purple 100</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-purple-200 $purple-200</code>
                </p>
                <p class="text-color-purple-200">◼︎ purple 200</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-purple-300 $purple-300</code>
                </p>
                <p class="text-color-purple-300">◼︎ purple 300</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-purple-400 $purple-400</code>
                </p>
                <p class="text-color-purple-400">◼︎ purple 400</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-purple-500 $purple-500</code>
                </p>
                <p class="text-color-purple-500">◼︎ purple 500</p>
            </div>
        </div>
        <div class="mr7-sm p5">
            <p><code class="text-color-hint">.text-color-blue $blue</code>
            </p>
            <p class="text-color-blue">◼︎ blue</p>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-blue-100 $blue-100</code>
                </p>
                <p class="text-color-blue-100">◼︎ blue 100</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-blue-200 $blue-200</code>
                </p>
                <p class="text-color-blue-200">◼︎ blue 200</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-blue-300 $blue-300</code>
                </p>
                <p class="text-color-blue-300">◼︎ blue 300</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-blue-400 $blue-400</code>
                </p>
                <p class="text-color-blue-400">◼︎ blue 400</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-blue-500 $blue-500</code>
                </p>
                <p class="text-color-blue-500">◼︎ blue 500</p>
            </div>
        </div>
        <div class="mr7-sm p5">
            <p><code class="text-color-hint">.text-color-green $green</code>
            </p>
            <p class="text-color-green">◼︎ green</p>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-green-100 $green-100</code>
                </p>
                <p class="text-color-green-100">◼︎ green 100</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-green-200 $green-200</code>
                </p>
                <p class="text-color-green-200">◼︎ green 200</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-green-300 $green-300</code>
                </p>
                <p class="text-color-green-300">◼︎ green 300</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-green-400 $green-400</code>
                </p>
                <p class="text-color-green-400">◼︎ green 400</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-green-500 $green-500</code>
                </p>
                <p class="text-color-green-500">◼︎ green 500</p>
            </div>
        </div>
    </div>
    <div class="d-flex mt5 p5">
        <div>
            <div>
                <p><code class="text-color-hint">.text-color-gray-100 $gray-100</code>
                </p>
                <p class="text-color-gray-100">◼︎ gray 100</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-gray-200 $gray-200</code>
                </p>
                <p class="text-color-gray-200">◼︎ gray 200</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-gray-300 $gray-300</code>
                </p>
                <p class="text-color-gray-300">◼︎ gray 300</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-gray-400 $gray-400</code>
                </p>
                <p class="text-color-gray-400">◼︎ gray 400</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-gray-500 $gray-500</code>
                </p>
                <p class="text-color-gray-500">◼︎ gray 500</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-gray-600 $gray-600</code>
                </p>
                <p class="text-color-gray-600">◼︎ gray 600</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-gray-700 $gray-700</code>
                </p>
                <p class="text-color-gray-700">◼︎ gray 700</p>
            </div>
            <div>
                <hr/>
                <p><code class="text-color-hint">.text-color-gray-800 $gray-800</code>
                </p>
                <p class="text-color-gray-800">◼︎ gray 800</p>
            </div>
        </div>
    </div>
    <hr class="my7" />
    <h4>Weight &amp; style</h4>
    <p><code class="text-color-hint">.text-weight-normal, .text-style-normal<br/>$font-weight-normal</code>
    </p>
    <p class="text-weight-normal text-style-normal">Normal weight and style</p>
    <hr/>
    <p><code class="text-color-hint">.text-weight-bold<br/>$font-weight-bold</code>
    </p>
    <p class="text-weight-bold">Bold weight</p>
    <hr/>
    <p><code class="text-color-hint">.text-style-italic</code>
    </p>
    <p class="text-style-italic">Italic style</p>
    <hr/>
    <p><code class="text-color-hint">.text-underline</code>
    </p>
    <p class="text-underline">Underline</p>
    <hr/>
    <p><code class="text-color-hint">.text-weight-bold.text-style-italic.text-underline</code>
    </p>
    <p class="text-style-italic text-weight-bold text-underline">Bold, italic, and underline</p>
    <hr class="my7" />
    <h4>Responsive demo</h4>
    <p><code class="text-color-hint">.text-1.text-2-sm.text-3-md.text-4-lg.text-5-xl</code>
    </p>
    <p class="text-1 text-2-sm text-3-md text-4-lg text-5-xl">Resize to see me change</p>
</div>
import * as React from 'react';

function Label(props) {
  const className = props.className || 'text-color-hint';
  return (
    <p>
      <code className={className}>{props.children}</code>
    </p>
  );
}

function TypographyUtilities() {
  return (
    <div>
      <h4>Text and heading sizes</h4>
      <div className="d-flex-sm">
        <div className="mr7-sm">
          <Label>
            .text-1<br />@include text-1
          </Label>
          <p className="text-1">Regular 12px</p>
          <hr />
          <Label>
            .text-2<br />@include text-2
          </Label>
          <p className="text-2">Regular 14px</p>
          <hr />
          <Label>
            .text-3<br />@include text-3
          </Label>
          <p className="text-3">Regular 16px</p>
          <hr />
          <Label>
            .text-4<br />@include text-4
          </Label>
          <p className="text-4">Regular 18px</p>
          <hr />
          <Label>
            .text-5<br />@include text-5
          </Label>
          <p className="text-5">Regular 21px</p>
          <hr />
          <Label>
            .text-6<br />@include text-6
          </Label>
          <p className="text-6">Regular 24px</p>
          <hr />
          <Label>
            .text-7<br />@include text-7
          </Label>
          <p className="text-7">Regular 36px</p>
          <hr />
          <Label>
            .text-8<br />@include text-8
          </Label>
          <p className="text-8">Regular 53px</p>
        </div>
        <div>
          <Label>
            .text-1.text-weight-bold<br />@include text-1($font-weight-bold)
          </Label>
          <p className="text-1 text-weight-bold">Bold 12px</p>
          <hr />
          <Label>
            .text-2.text-weight-bold<br />@include text-2($font-weight-bold)
          </Label>
          <p className="text-2 text-weight-bold">Bold 14px</p>
          <hr />
          <Label>
            h6, .h6<br />@include text-3($font-weight-bold)
          </Label>
          <p className="h6">Bold 16px</p>
          <hr />
          <Label>
            h5, .h5<br />@include text-4($font-weight-bold)
          </Label>
          <p className="h5">Bold 18px</p>
          <hr />
          <Label>
            h4, .h4<br />@include text-5($font-weight-bold)
          </Label>
          <p className="h4">Bold 21px</p>
          <hr />
          <Label>
            h3, .h3<br />@include text-6($font-weight-bold)
          </Label>
          <p className="h3">Bold 24px</p>
          <hr />
          <Label>
            h2, .h2<br />@include text-7($font-weight-bold)
          </Label>
          <p className="h2">Bold 36px</p>
          <hr />
          <Label>
            h1, .h1<br />@include text-8($font-weight-bold)
          </Label>
          <p className="h1">Bold 53px</p>
        </div>
      </div>

      <hr className="my7" />

      <h4>Uppercase</h4>
      <Label>
        .uppercase-1<br />@include uppercase-1
      </Label>
      <p className="uppercase-1">Uppercase 9px</p>
      <hr />
      <Label>
        .uppercase-2<br />@include uppercase-2
      </Label>
      <p className="uppercase-2">Uppercase 11px</p>
      <hr />
      <Label>
        .uppercase-3<br />@include uppercase-3
      </Label>
      <p className="uppercase-3">Uppercase 12px</p>

      <hr className="my7" />

      <h4>Colors</h4>
      <div className="d-flex flex-wrap">
        <div className="mr7-sm p5">
          <Label>
            .text-color-primary<br />$text-color-primary
          </Label>
          <p className="text-color-primary">◼︎ Primary color</p>
          <hr />
          <Label>
            .text-color-secondary<br />$text-color-secondary
          </Label>
          <p className="text-color-secondary">◼︎ Secondary color</p>
          <hr />
          <Label>
            .text-color-hint<br />$text-color-hint
          </Label>
          <p className="text-color-hint">◼︎ Hint color</p>
        </div>
        <div className="p5" style={{ background: '#232323' }}>
          <Label className="text-color-reversed-hint">
            .text-color-reversed-primary<br />$text-color-reversed-primary
          </Label>
          <p className="text-color-reversed-primary">
            ◼︎ Reversed primary color
          </p>
          <hr className="hr-reversed" />
          <Label className="text-color-reversed-hint">
            .text-color-reversed-secondary<br />$text-color-reversed-secondary
          </Label>
          <p className="text-color-reversed-secondary">
            ◼︎ Reversed secondary color
          </p>
          <hr className="hr-reversed" />
          <Label className="text-color-reversed-hint">
            .text-color-reversed-hint<br />$text-color-reversed-hint
          </Label>
          <p className="text-color-reversed-hint">◼︎ Reversed hint color</p>
        </div>
      </div>

      <div className="d-flex flex-wrap mt5">
        {['orange', 'red', 'purple', 'blue', 'green'].map(color => (
          <div className="mr7-sm p5" key={color}>
            <Label>
              .text-color-{color} ${color}
            </Label>
            <p className={`text-color-${color}`}>◼︎ {color}</p>
            {['100', '200', '300', '400', '500'].map(shade => (
              <div key={`${color}-${shade}`}>
                <hr />
                <Label>
                  .text-color-{color}-{shade} ${color}-{shade}
                </Label>
                <p className={`text-color-${color}-${shade}`}>
                  ◼︎ {color} {shade}
                </p>
              </div>
            ))}
          </div>
        ))}
      </div>

      <div className="d-flex mt5 p5">
        <div>
          {['100', '200', '300', '400', '500', '600', '700', '800'].map(
            shade => (
              <div key={`gray-${shade}`}>
                {shade !== '100' && <hr />}
                <Label>
                  .text-color-gray-{shade} $gray-{shade}
                </Label>
                <p className={`text-color-gray-${shade}`}>◼︎ gray {shade}</p>
              </div>
            ),
          )}
        </div>
      </div>

      <hr className="my7" />

      <h4>Weight &amp; style</h4>
      <Label>
        .text-weight-normal, .text-style-normal<br />$font-weight-normal
      </Label>
      <p className="text-weight-normal text-style-normal">
        Normal weight and style
      </p>
      <hr />
      <Label>
        .text-weight-bold<br />$font-weight-bold
      </Label>
      <p className="text-weight-bold">Bold weight</p>
      <hr />
      <Label>.text-style-italic</Label>
      <p className="text-style-italic">Italic style</p>
      <hr />
      <Label>.text-underline</Label>
      <p className="text-underline">Underline</p>
      <hr />
      <Label>.text-weight-bold.text-style-italic.text-underline</Label>
      <p className="text-style-italic text-weight-bold text-underline">
        Bold, italic, and underline
      </p>

      <hr className="my7" />

      <h4>Responsive demo</h4>
      <Label>.text-1.text-2-sm.text-3-md.text-4-lg.text-5-xl</Label>
      <p className="text-1 text-2-sm text-3-md text-4-lg text-5-xl">
        Resize to see me change
      </p>
    </div>
  );
}

export default TypographyUtilities;
/* No context defined for this component. */
  • Content:
    // ------------------------------
    // Responsive type utilities
    // ------------------------------
    //
    // Example: <div class="text-1 text-2-md"> would be 12px at xs and sm sizes,
    // and 14px at md, lg, and xl sizes.
    //
    // Example: <h1 class="h3 h2-sm h1-md"> would be rendered as an h3 at xs size,
    // as an h2 at sm size, and as an h1 at md size and up.
    //
    // scss-lint:disable ImportantRule
    // scss-lint:disable SpaceBeforeBrace
    
    @if $enable-type-utilities {
      @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
          $suffix: breakpoint-suffix($breakpoint, $grid-breakpoints);
    
          .text-1#{$suffix} { @include text-1($important: true); }
          .text-2#{$suffix} { @include text-2($important: true); }
    
          .text-3#{$suffix}, .h6#{$suffix} { @include text-3($important: true); }
          .text-4#{$suffix}, .h5#{$suffix} { @include text-4($important: true); }
          .text-5#{$suffix}, .h4#{$suffix} { @include text-5($important: true); }
          .text-6#{$suffix}, .h3#{$suffix} { @include text-6($important: true); }
          .text-7#{$suffix}, .h2#{$suffix} { @include text-7($important: true); }
          .text-8#{$suffix}, .h1#{$suffix} { @include text-8($important: true); }
    
          .h1#{$suffix},
          .h2#{$suffix},
          .h3#{$suffix},
          .h4#{$suffix},
          .h5#{$suffix},
          .h6#{$suffix} { font-weight: $font-weight-bold !important; }
    
          .uppercase-1#{$suffix} { @include uppercase-1($important: true); }
          .uppercase-2#{$suffix} { @include uppercase-2($important: true); }
          .uppercase-3#{$suffix} { @include uppercase-3($important: true); }
        }
      }
    }
    
    
    // ------------------------------
    // Text color utilities
    // ------------------------------
    
    .text-color-inherit { color: inherit !important; }
    
    .text-color-primary   { color: $text-color-primary   !important; }
    .text-color-secondary { color: $text-color-secondary !important; }
    .text-color-hint      { color: $text-color-hint      !important; }
    
    .text-color-reversed-primary   { color: $text-color-reversed-primary   !important; }
    .text-color-reversed-secondary { color: $text-color-reversed-secondary !important; }
    .text-color-reversed-hint      { color: $text-color-reversed-hint      !important; }
    
    .text-color-orange { color: $orange !important; }
    .text-color-orange-100 { color: $orange-100 !important; }
    .text-color-orange-200 { color: $orange-200 !important; }
    .text-color-orange-300 { color: $orange-300 !important; }
    .text-color-orange-400 { color: $orange-400 !important; }
    .text-color-orange-500 { color: $orange-500 !important; }
    
    .text-color-red { color: $red !important; }
    .text-color-red-100 { color: $red-100 !important; }
    .text-color-red-200 { color: $red-200 !important; }
    .text-color-red-300 { color: $red-300 !important; }
    .text-color-red-400 { color: $red-400 !important; }
    .text-color-red-500 { color: $red-500 !important; }
    
    .text-color-purple { color: $purple !important; }
    .text-color-purple-100 { color: $purple-100 !important; }
    .text-color-purple-200 { color: $purple-200 !important; }
    .text-color-purple-300 { color: $purple-300 !important; }
    .text-color-purple-400 { color: $purple-400 !important; }
    .text-color-purple-500 { color: $purple-500 !important; }
    
    .text-color-blue { color: $blue !important; }
    .text-color-blue-100 { color: $blue-100 !important; }
    .text-color-blue-200 { color: $blue-200 !important; }
    .text-color-blue-300 { color: $blue-300 !important; }
    .text-color-blue-400 { color: $blue-400 !important; }
    .text-color-blue-500 { color: $blue-500 !important; }
    
    .text-color-green { color: $green !important; }
    .text-color-green-100 { color: $green-100 !important; }
    .text-color-green-200 { color: $green-200 !important; }
    .text-color-green-300 { color: $green-300 !important; }
    .text-color-green-400 { color: $green-400 !important; }
    .text-color-green-500 { color: $green-500 !important; }
    
    .text-color-gray-100 { color: $gray-100 !important; }
    .text-color-gray-200 { color: $gray-200 !important; }
    .text-color-gray-300 { color: $gray-300 !important; }
    .text-color-gray-400 { color: $gray-400 !important; }
    .text-color-gray-500 { color: $gray-500 !important; }
    .text-color-gray-600 { color: $gray-600 !important; }
    .text-color-gray-700 { color: $gray-700 !important; }
    .text-color-gray-800 { color: $gray-800 !important; }
    
    
    // ------------------------------
    // Text weight/style utilities
    // ------------------------------
    
    .text-weight-bold   { font-weight: $font-weight-bold   !important; }
    .text-weight-normal { font-weight: $font-weight-normal !important; }
    
    .text-style-italic { font-style: italic !important; }
    .text-style-normal { font-style: normal !important; }
    
    .text-underline { text-decoration: underline !important; }
    
    // TODO: Alignment
    
  • URL: /components/raw/typography/_typography.scss
  • Filesystem Path: library/utilities/typography/_typography.scss
  • Size: 4.7 KB