Text
Text utility classes help in setting a consistent typography throughout the application for legibility and readability of content. These include controls for headings, body text, alignment, font size, font weight, line height, and text styles.
Heading
h6 This is for component and layout headings
h5 This is for component and layout headings
h4 This is for component and layout headings
h3 This is for component and layout headings
h2 This is for component and layout headings
h1 This is for component and layout
<h6> h6 This is for component and layout headings</h6>
<h5> h5 This is for component and layout headings</h5>
<h4> h4 This is for component and layout headings</h4>
<h3> h3 This is for component and layout headings</h3>
<h2> h2 This is for component and layout headings</h2>
<h1> h1 This is for component and layout headings</h1>
Font sizes
.ds-font-size-xs
.ds-font-size-sm
.ds-font-size-md
.ds-font-size-lg
.ds-font-size-xl
.ds-font-size-xxl
.ds-font-size-xxxl
<p class="ds-font-size-xs">.ds-font-size-xs</p>
<p class="ds-font-size-sm">.ds-font-size-sm</p>
<p class="ds-font-size-md">.ds-font-size-md</p>
<p class="ds-font-size-lg">.ds-font-size-lg</p>
<p class="ds-font-size-xl">.ds-font-size-xl</p>
<p class="ds-font-size-xxl">.ds-font-size-xxl</p>
<p class="ds-font-size-xxxl">.ds-font-size-xxxl</p>
Text alignment
<div class="text-left">Left aligned text</div>
<div class="text-center">Center aligned text</div>
<div class="text-right">Right aligned text</div>
<div class="text-justify"></div>
Font variations
Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Medium weight text.
Light weight text.
Italic text.
Text without font style
<p class="weight-bold">Bold text.</p>
<p class="weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="weight-regular">Normal weight text.</p>
<p class="weight-medium">Medium weight text.</p>
<p class="weight-light">Light weight text.</p>
<p class="style-italic">Italic text.</p>
<p class="style-normal">Text without font style</p>
Line height
Change the line height with .line-height-* utilities.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
<p class="line-height-sm">...</p>
<p class="line-height-md">...</p>
<p class="line-height-lg">...</p>
<p class="line-height-xl">...</p>
<p class="line-height-xxl">...</p>
Text decoration
Decorate text in components with text decoration classes.
This text has a line underneath it.
This text has a line going through it.
<p class="ds-text-decoration-underline"></p>
<p class="ds-text-decoration-line-through"></p>
Hyper link
A hyperlink is a web link that navigates to another webpage, file, or object.
<a href="#" class="ds-link-text"></a>
<a href="#" class="ds-link-text ds-text-decoration-none"></a>
<a href="#" class="ds-link-text "><i class="icon-comment-stroke mr7"></i><span>View comments</span></a>
<a href="#" class="ds-link-text ds-text-decoration-none "><i class="icon-comment-stroke mr7"></i><span>View comments</span></a>
Help text
Help text is used to provide additional and useful information about an element.
<div class="ds-help-wrapper relative mr30">
<a class="ds-help help-icon-btn flex align-center">Plain text only <i class="icon-tourhelp ml5"></i></a>
<div class="ds-help-content box-shadow-sm">Due to the nature of their differences, qualitative methods are much better suited for answering questions about why or how to fix a problem, whereas quantitative methods do a much better job answering how many and how much types of questions</div>
</div>
<div class="ds-help-wrapper relative">
<a class="ds-help help-icon-btn flex align-center">Text with link <i class="icon-tourhelp ml5"></i></a>
<div class="ds-help-content box-shadow-sm">Due to the nature of their differences, qualitative methods are much better suited for answering questions about why or how to fix a problem, whereas quantitative methods do a much better job answering how many and how much types of questions
<a href="#" class="ds-link-text ds-text-decoration-none mt10"><span>View comments</span><i class="icon-keyboard-arrow-right ml5 mt2"></i></a>
</div>
</div>