Typography Utils

The typography system provides consistent text styling across the design system.

Text Styles

Each of the following applies font-family, font-size, font-weight and line-height.

.ci-text-h1

.ci-text-h2

.ci-text-h3

.ci-text-h4

.ci-text-h5

.ci-text-h6

.ci-text-lg

.ci-text-md

.ci-text-sm

.ci-text-xs

<template>
  <div>
    <div class="ci-text-h1">.ci-text-h1</div><br>
    <div class="ci-text-h2">.ci-text-h2</div><br>
    <div class="ci-text-h3">.ci-text-h3</div><br>
    <div class="ci-text-h4">.ci-text-h4</div><br>
    <div class="ci-text-h5">.ci-text-h5</div><br>
    <div class="ci-text-h6">.ci-text-h6</div><br>
    <div class="ci-text-lg">.ci-text-lg</div><br>
    <div class="ci-text-md">.ci-text-md</div><br>
    <div class="ci-text-sm">.ci-text-sm</div><br>
    <div class="ci-text-xs">.ci-text-xs</div><br>
  </div>
</template>

Font Styles

Use these classes to adjust the font-weight, style or text-decoration of your text.

Normal text

Bold text

Italic text

Underlined text

<template>
  <div>
    <div class="ci-font-normal">Normal text</div><br>
    <div class="ci-font-bold">Bold text</div><br>
    <div class="ci-italic">Italic text</div><br>
    <div class="ci-underline">Underlined text</div><br>
  </div>
</template>

Line Height

Use these classes to adjust the line-height of your text.

Leading none: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod mi odio, id pretium orci rhoncus non. Sed laoreet sem ex, nec eleifend ipsum pulvinar sed. Quisque magna lacus, fringilla sollicitudin aliquet non, lacinia eu ligula. Vivamus id dignissim nunc. Phasellus laoreet velit eget nisi commodo, rhoncus efficitur lectus congue. Sed sodales sem nisi, vel tempus eros malesuada eu. Pellentesque vehicula tincidunt congue.

Leading sm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod mi odio, id pretium orci rhoncus non. Sed laoreet sem ex, nec eleifend ipsum pulvinar sed. Quisque magna lacus, fringilla sollicitudin aliquet non, lacinia eu ligula. Vivamus id dignissim nunc. Phasellus laoreet velit eget nisi commodo, rhoncus efficitur lectus congue. Sed sodales sem nisi, vel tempus eros malesuada eu. Pellentesque vehicula tincidunt congue.

Leading md: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod mi odio, id pretium orci rhoncus non. Sed laoreet sem ex, nec eleifend ipsum pulvinar sed. Quisque magna lacus, fringilla sollicitudin aliquet non, lacinia eu ligula. Vivamus id dignissim nunc. Phasellus laoreet velit eget nisi commodo, rhoncus efficitur lectus congue. Sed sodales sem nisi, vel tempus eros malesuada eu. Pellentesque vehicula tincidunt congue.

<template>
  <div>
    <p class="ci-leading-none"> { example text } </p>
    <p class="ci-leading-sm"> { example text } </p>
    <p class="ci-leading-md"> { example text } </p>
  </div>
</template>

Scrollbars

Use .ci-scrollbars to give an element styled scrollbars.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod mi odio, id pretium orci rhoncus non. Sed laoreet sem ex, nec eleifend ipsum pulvinar sed. Quisque magna lacus, fringilla sollicitudin aliquet non, lacinia eu ligula. Vivamus id dignissim nunc. Phasellus laoreet velit eget nisi commodo, rhoncus efficitur lectus congue. Sed sodales sem nisi, vel tempus eros malesuada eu. Pellentesque vehicula tincidunt congue.

Sed malesuada faucibus ipsum sed ultricies. Duis viverra sapien hendrerit orci facilisis, ac vestibulum libero vehicula. Proin nunc velit, mollis non ligula nec, elementum commodo lectus. Aliquam erat volutpat. Pellentesque vehicula in dui et dictum. Mauris dapibus mauris sit amet mi posuere imperdiet. Nullam sagittis ultricies erat vel commodo. Vestibulum cursus magna libero, et ornare elit luctus nec. Fusce commodo quam nec condimentum condimentum.

Phasellus aliquet, felis quis rutrum pulvinar, metus ligula ultricies sapien, ac ultrices mauris ex a quam. Sed sodales risus at feugiat mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sodales magna at varius vulputate. Phasellus efficitur, massa nec mattis fringilla, tellus eros posuere nibh, eu elementum augue nibh at mi. Etiam sollicitudin nulla ut mauris pellentesque, vel cursus mauris pretium. Phasellus molestie non nisl in tincidunt. Proin euismod diam leo, sed viverra lectus convallis eget. Proin lacus diam, faucibus vitae ligula sed, ornare auctor lectus. Vestibulum vitae dictum est. Ut eu finibus felis, in posuere dolor. Donec volutpat ultricies nisl vitae molestie. Phasellus eleifend neque id libero tempor dignissim vel varius lacus. Maecenas fermentum leo vitae neque commodo scelerisque.

<template>
  <div class="ci-scrollbars my-demo"> { example text } </div>
</template>
<style>
.my-demo {
  height: 150px;
  overflow-y: scroll;
}
</style>

Usage

main.ts

import '@ci/stratus-components/stratus-components.css'