Design System Utilities

The following guide covers some major utility features of the Fundamental Library Styles design system toolkit.

This page is under construction and the utility features may change. We are migrating those features towards the Fiori 3 Design System, so you may expect some breaking changes(e.g. the color system)

Text Utilities

Use the text utilities to set the text style and the justification.

This text is bold

This text is italic

This text is centered

This text is right aligned

text with no transformation

<p class="fd-has-font-weight-bold">This text is bold</p>
<p class="fd-has-font-style-italic">This text is italic</p>
<p class="fd-has-text-align-center">This text is centered</p>
<p class="fd-has-text-align-right">This text is right aligned</p>
<p class="fd-has-text-transform-none">text with no transformation</p>

Floats

The float helper classes are used to control the element floats in the HTML element.

This text is floating on left

This text is floating on right

<p class="fd-has-float-left">This text is floating on left</p>
<p class="fd-has-float-right">This text is floating on right</p>

Type Weights

This is font with weight light

This is font with weight regular

This is font with weight bold

<p class="fd-has-font-weight-light">This is font with weight light</p>
<p class="fd-has-font-weight-normal">This is font with weight regular</p>
<p class="fd-has-font-weight-bold">This is font with weight bold</p>

Other Utilities

Clearfix

This element clear all

<span class="fd-has-clearfix">This element clear all</span>

Display Flex

This element is display flex

<span class="fd-has-display-flex">This element is display flex</span>

Display Block

This element is display block

<span class="fd-has-display-block">This element is display block</span>

Align items center

This element is align items center

<span class="fd-has-align-items-center">This element is align items center</span>

Flex grow

This element is flex grow

<span class="fd-has-flex-grow-1">This element is flex grow</span>