Typography
The base font size is 14px. All other font sizes are based on this value.
Display
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
| Class | Equivalent pixels | Equivalent rems | Example |
|---|---|---|---|
| .display-1 | 80px | 5.714rem | Display |
| .display-2 | 72px | 5.143rem | Display |
| .display-3 | 64px | 4.571rem | Display |
| .display-4 | 56px | 4rem | Display |
| .display-5 | 48px | 3.429rem | Display |
| .display-6 | 40px | 2.857rem | Display |
Headings
| Class | Tag | Equivalent pixels | Equivalent rems | Example |
|---|---|---|---|---|
| .h1 | h1 | 40px | 2.857rem | Heading |
| .h2 | h2 | 32px | 2.286rem | Heading |
| .h3 | h3 | 28px | 2rem | Heading |
| .h4 | h4 | 24px | 1.714rem | Heading |
| .h5 | h5 | 20px | 1.429rem | Heading |
| .h6 | h6 | 16px | 1.143rem | Heading |
Font Sizes
The base font size is 14px. All other font sizes are based on this value.
| Class | Equivalent pixels | Equivalent rems | Example |
|---|---|---|---|
| .fs-4xl | 32px | 2.286rem | Example |
| .fs-3xl | 30px | 2.143rem | Example |
| .fs-xxl | 24px | 1.714rem | Example |
| .fs-xl | 20px | 1.429rem | Example |
| .fs-lg | 16px | 1.143rem | Example |
| .fs-md | 14px (root) | 1rem | Example |
| .fs-sm | 13px | 0.929rem | Example |
| .fs-xs | 12px | 0.857rem | Example |
| .fs-xxs | 11px | 0.786rem | Example |
| .fs-3xs | 10px | 0.714rem | Example |
Font Weights
Kyber's predefined font weight classes allow developers and designers to easily apply different font weights to text elements, providing fine-grained control over typography and emphasizing or de-emphasizing text as needed.
font-weight utilities are abbreviated as .fw-*.
| Class | Equivalent Weight | Example |
|---|---|---|
| .fw-light | 200, 300 | Example |
| .fw-normal | 400 | Example |
| .fw-medium | 500 | Example |
| .fw-semibold | 600 | Example |
| .fw-bold | 700 | Example |
Section Headers
| Class | Example |
|---|---|
| .section-header-xs | Section Heading |
| .section-header-sm | Section Heading |
| .section-header-md | Section Heading |
| .section-header-lg | Section Heading |
| .section-header-xl | Section Heading |
Font Family
There are 2 utility classes that can be used to apply Ivar Text Regular, Ivar Headline, and Inter font families to containers.
<> <div className="fm-ivar-text-regular">Ivar Text Regular</div> <div className="fm-ivar-headline">Ivar Headline</div> <div className="fm-inter">Inter</div> </>
Links
Standalone hyperlinks that do not use the <Link> component can be styled with the .klink class. Which will apply the expected text decoration and hover styling.
<a href="#" className="klink"> Link </a>
When using icons within a Link it is recommend to avoid rendering the text-decoration on hover. One option is to use the d-inline-block text-decoration-none classes on the icon.
<a href="#" className="klink"> <span className="icon-trash-01 d-inline-block text-decoration-none" /> </a>
Text alignment
Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
<div> <p class="text-start">Start aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-end">End aligned text on all viewport sizes.</p> <p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p> <p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p> </div>
Note that we don’t provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
Text wrapping and overflow
Wrap text with a .text-wrap class.
<div class="badge text-bg-primary text-wrap" style={{ width: '6rem' }}> This text should wrap. </div>
Prevent text from wrapping with a .text-nowrap class.
<div class="text-nowrap bg-body-secondary border" style={{ width: '8rem' }}> This text should overflow the parent. </div>
Text truncate
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.
<div> {/* Block level */} <div className="row"> <div className="col-2 text-truncate"> This text is quite long, and will be truncated once displayed. </div> </div> {/* Inline level */} <span className="d-inline-block text-truncate" style={{ maxWidth: '150px' }}> This text is quite long, and will be truncated once displayed. </span> </div>
Word break
Prevent long strings of text from breaking your components’ layout by using .text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.
<p class="text-break"> mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm </p>
Note that breaking words isn’t possible in
Arabic, which is the most used RTL
language. Therefore .text-break is removed from our RTL compiled CSS.
Text transform
Transform text in components with our text capitalization classes: text-lowercase, text-uppercase or text-capitalize.
<div> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p> </div>
Italics
Quickly change font-style of text with these utilities. font-style utilities are abbreviated as .fst-*.
<div> <p class="fst-italic">Italic text.</p> <p class="fst-normal">Text with normal font style</p> </div>
Line height
Change the line height with .lh-* utilities.
<div> <p class="lh-1"> This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. </p> <p class="lh-sm"> This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. </p> <p class="lh-base"> This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. </p> <p class="lh-lg"> This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. </p> </div>
Monospace
Change a selection to our monospace font stack with .font-monospace.
<p class="font-monospace">This is in monospace</p>
Reset color
Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.
<p class="text-body-secondary"> Secondary body text with a{' '} <a href="#" class="text-reset"> reset link </a> . </p>
Text decoration
Decorate text in components with text decoration classes.
<div> <p class="text-decoration-underline">This text has a line underneath it.</p> <p class="text-decoration-line-through">This text has a line going through it.</p> <a href="#" class="text-decoration-none"> This link has its text decoration removed </a> </div>