Text Utilities

Various styles and sizes of text can be created according to their respective class names. In order to only use the Text Utilities from Cascade UI in your project, copy and paste the below code in the head tag of your html document. 

                
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/text-utilities/text-utilities.css" />

Very Large Text
Large Text
Medium Text
Normal Text
Small Text
Very small text

Heading 1

Heading 2

Heading 3


Gray Text
Text strike

Light Weight
Regular Weight
Medium Weight
Semibold Weight
Bold Weight

Left Text
Centered Text
RightText
                  
              <!-- Rubik Font Family @credits - Google(https://fonts.google.com/) -->

              <!-- @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap'); -->

              <div class="t3">Very Large Text</div>
              <div class="t2">Large Text</div>
              <div class="t1p5">Medium Text</div>
              <div class="t1">Normal Text</div>
              <div class="t0p75">Small Text</div>
              <div class="t0p5">Very small text</div>
              
              <h1 class="h1">Heading 1</h1>
              <h2 class="h2">Heading 2</h2>
              <h3 class="h3">Heading 3</h3>
              
              <div class="gray-color">Gray Text</div>
              <div class="text-strike">Text Strike</div>

              <div class="t1p5 light">Light Weight</div>
              <div class="t1p5 regular">Regular Weight</div>
              <div class="t1p5 lightbold">Medium Weight</div>
              <div class="t1p5 semibold">Semibold Weight</div>
              <div class="t1p5 bold">Bold Weight</div>
              
              <div class="text-left">Left Text</div>
              <div class="text-center">Centered Text</div>
              <div class="text-right">Right Text</div>