Typography - Full - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="typeDisplayXL">Display XL</div>

<div class="typeDisplayXL-Bold">Display XL Bold</div>

<div class="typeDisplayLarge">Display Large</div>

<div class="typeDisplayLarge-Bold">Display Large Bold</div>

<div class="typeDisplayMedium">Display Medium</div>

<div class="typeDisplayMedium-Bold">Display Medium Bold</div>

<div class="typeDisplay">Display</div>

<div class="typeDisplay-Bold">Display Bold</div>

<div class="typeHeadline">Headline</div>

<div class="typeHeadline-Bold">Headline Bold</div>

<div class="typeTitle">Title</div>

<div class="typeTitle-Bold">Title Bold</div>

<div class="typeSubheader">Subheader</div>

<div class="typeSubheader-Bold">Subheader Bold</div>

<div class="typeBody">Body</div>

<div class="typeBody-Bold">Body Bold</div>

<div class="typeCaption">Caption</div>

<div class="typeCaption-Bold">Caption Bold</div>

<div class="typeSmall">Small</div>

<div class="typeSmall-Bold">Small Bold</div>

// Mixins are specified in Service Portal Theme Variables (See Theme Setup)

.typeDisplayXL {
  @include typeDisplayXL;
}

.typeDisplayXL-Bold {
  @include typeDisplayXL(true);
}

.typeDisplayLarge {
  @include typeDisplayLarge;
}

.typeDisplayLarge-Bold {
  @include typeDisplayLarge(true);
}

.typeDisplayMedium {
  @include typeDisplayMedium;
}

.typeDisplayMedium-Bold {
  @include typeDisplayMedium(true);
}

.typeDisplay {
  @include typeDisplay;
}

.typeDisplay-Bold {
  @include typeDisplay(true);
}

.typeHeadline {
  @include typeHeadline;
}

.typeHeadline-Bold {
  @include typeHeadline(true);
}

.typeTitle {
  @include typeTitle;
}

.typeTitle-Bold {
  @include typeTitle(true);
}

.typeSubheader {
  @include typeSubheader;
}

.typeSubheader-Bold {
  @include typeSubheader(true);
}

.typeBody {
  @include typeBody;
}

.typeBody-Bold {
  @include typeBody(true);
}

.typeCaption {
  @include typeCaption;
}

.typeCaption-Bold {
  @include typeCaption(true);
}

.typeSmall {
  @include typeSmall;
}

.typeSmall-Bold {
  @include typeSmall(true);
}