Design System Utilities

The following guide covers all the major utility features of the SAP Fundamentals (FDUI) design system toolkit. We recommend that you utilize these functions, mixins and helper classes to maintain consistency throughout your application. Using the toolkit features will ensure that you application will remain compatible and easy to upgrade with the future versions of FDUI, transition between themes and customization.

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 Sizes

Use these CSS classes to control the text size. Used mainly for content text, all standard components have the right text size by default.

This is the default body type size

This is text type size -1

This is text type size 0 (same as default)

This is text type size 1

This is text type size 2

This is text type size 3

This is text type size 4

This is text type size 5

<p class="fd-has-type">This is the default body type size</p>
<p class="fd-has-type-minus-1">This is text type size -1</p>
<p class="fd-has-type-0">This is text type size 0 (same as default)</p>
<p class="fd-has-type-1">This is text type size 1</p>
<p class="fd-has-type-2">This is text type size 2</p>
<p class="fd-has-type-3">This is text type size 3</p>
<p class="fd-has-type-4">This is text type size 4</p>
<p class="fd-has-type-5">This is text type size 5</p>
<p class="fd-has-type-6">This is text type size 5</p>

Type Face

fd-has-font-family-body renders Open-Sans font. fd-has-font-family-header renders Roboto font.

This is body text

This is header text

This is code text

<p class="fd-has-font-family-body">This is body text</p>
<p class="fd-has-font-family-header">This is header text</p>
<p class="fd-has-font-family-code">This is code text</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>

Colors

All colors on the color palette. Can be accessed via SCSS function and respective CSS classes.

Color Function

Colors can be accessed via color function fd-color({group}, {shade})

Color Helper classes

Helper classes are available as a foreground color class fd-has-color-{group}-{shade} or as a background color fd-has-background-color-{group}-{shade}. A foreground color class applies the color property to the element for example .fd-has-color-primary results in color: ##006fbb !important

Class structure	{group}-{shade} options
Foreground Class: `.fd-has-color-{group}-{shade}` Background Class: `.fd-has-background-color-{group}-{shade}`	`action` - `1`, `2`, `3` `shell` - `1`, `2` `text` - `1`, `2`, `3`, `4` `background` - `1`, `2`, `3`, `4`, `5`, `6` `neutral` - `1`, `2`, `3`, `4` `status` - `1`, `2`, `3`, `4`, `5` `accent` - `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `13`, `14`, `15`, `16`

Please check the colors page to see full color palette.

Some examples of color helper classes.

Action Color Group

.fd-has-color-action-1

.fd-has-color-action-2

Shell Color Group

.fd-has-background-color-shell-1

.fd-has-color-shell-2

Text Color Group

.fd-has-color-text-1

.fd-has-color-text-2

.fd-has-color-text-3

.fd-has-color-text-4

Background Color Group

.fd-has-color-background-1

.fd-has-color-background-2

.fd-has-color-background-3

.fd-has-color-background-4

.fd-has-color-background-5

.fd-has-color-background-6

Neutral Color Group

.fd-has-background-color-netural-1

.fd-has-background-color-netural-2

.fd-has-background-color-netural-3

.fd-has-background-color-netural-4

Status Color Group

.fd-has-background-color-status-1

.fd-has-background-color-status-2

.fd-has-background-color-status-3

.fd-has-background-color-status-4

.fd-has-background-color-status-5

Accent Color Group

.fd-has-background-color-accent-1

.fd-has-background-color-accent-2

.fd-has-background-color-accent-3

.fd-has-background-color-accent-4

.fd-has-background-color-accent-5

.fd-has-background-color-accent-6

.fd-has-background-color-accent-7

.fd-has-background-color-accent-8

.fd-has-background-color-accent-9

.fd-has-background-color-accent-10

.fd-has-background-color-accent-11

.fd-has-background-color-accent-12

.fd-has-background-color-accent-13

.fd-has-background-color-accent-14

.fd-has-background-color-accent-15

.fd-has-background-color-accent-16

<h3>Action Color Group</h3>
<p class="fd-has-color-action-1">.fd-has-color-action-1</p>
<p class="fd-has-color-action-2 fd-has-background-color-action-1">.fd-has-color-action-2</p>

<h3>Shell Color Group</h3>
<p class="fd-has-background-color-shell-1 fd-has-color-text-5">.fd-has-background-color-shell-1</p>
<p class="fd-has-background-color-shell-1 fd-has-color-shell-2">.fd-has-color-shell-2</p>

<h3>Text Color Group</h3>
<p class="fd-has-color-text-1">.fd-has-color-text-1</p>
<p class="fd-has-color-text-2">.fd-has-color-text-2</p>
<p class="fd-has-color-text-3">.fd-has-color-text-3</p>
<p class="fd-has-color-text-4">.fd-has-color-text-4</p>

<h3>Background Color Group</h3>
<p class="fd-has-background-color-background-1 fd-has-color-text-1">.fd-has-color-background-1</p>
<p class="fd-has-background-color-background-2 fd-has-color-text-1">.fd-has-color-background-2</p>
<p class="fd-has-background-color-background-3 fd-has-color-text-1">.fd-has-color-background-3</p>
<p class="fd-has-background-color-background-4 fd-has-color-text-1">.fd-has-color-background-4</p>
<p class="fd-has-background-color-background-5 fd-has-color-text-1">.fd-has-color-background-5</p>
<p class="fd-has-background-color-background-6 fd-has-color-text-1">.fd-has-color-background-6</p>

<h3>Neutral Color Group</h3>
<p class="fd-has-background-color-neutral-1 fd-has-color-text-1">.fd-has-background-color-netural-1</p>
<p class="fd-has-background-color-neutral-2 fd-has-color-text-1">.fd-has-background-color-netural-2</p>
<p class="fd-has-background-color-neutral-3 fd-has-color-text-1">.fd-has-background-color-netural-3</p>
<p class="fd-has-background-color-neutral-4 fd-has-color-text-1">.fd-has-background-color-netural-4</p>

<h3>Status Color Group</h3>
<p class="fd-has-background-color-status-1 fd-has-color-text-5">.fd-has-background-color-status-1</p>
<p class="fd-has-background-color-status-2 fd-has-color-text-5">.fd-has-background-color-status-2</p>
<p class="fd-has-background-color-status-3 fd-has-color-text-5">.fd-has-background-color-status-3</p>
<p class="fd-has-background-color-status-4 fd-has-color-text-5">.fd-has-background-color-status-4</p>
<p class="fd-has-background-color-status-5 fd-has-color-text-5">.fd-has-background-color-status-5</p>

<h3>Accent Color Group</h3>
<p class="fd-has-background-color-accent-1 fd-has-color-text-5">.fd-has-background-color-accent-1</p>
<p class="fd-has-background-color-accent-2 fd-has-color-text-5">.fd-has-background-color-accent-2</p>
<p class="fd-has-background-color-accent-3 fd-has-color-text-5">.fd-has-background-color-accent-3</p>
<p class="fd-has-background-color-accent-4 fd-has-color-text-5">.fd-has-background-color-accent-4</p>
<p class="fd-has-background-color-accent-5 fd-has-color-text-5">.fd-has-background-color-accent-5</p>
<p class="fd-has-background-color-accent-6 fd-has-color-text-5">.fd-has-background-color-accent-6</p>
<p class="fd-has-background-color-accent-7 fd-has-color-text-5">.fd-has-background-color-accent-7</p>
<p class="fd-has-background-color-accent-8 fd-has-color-text-5">.fd-has-background-color-accent-8</p>
<p class="fd-has-background-color-accent-9 fd-has-color-text-5">.fd-has-background-color-accent-9</p>
<p class="fd-has-background-color-accent-10 fd-has-color-text-5">.fd-has-background-color-accent-10</p>
<p class="fd-has-background-color-accent-11 fd-has-color-text-5">.fd-has-background-color-accent-11</p>
<p class="fd-has-background-color-accent-12 fd-has-color-text-5">.fd-has-background-color-accent-12</p>
<p class="fd-has-background-color-accent-13 fd-has-color-text-5">.fd-has-background-color-accent-13</p>
<p class="fd-has-background-color-accent-14 fd-has-color-text-5">.fd-has-background-color-accent-14</p>
<p class="fd-has-background-color-accent-15 fd-has-color-text-5">.fd-has-background-color-accent-15</p>
<p class="fd-has-background-color-accent-16 fd-has-color-text-5">.fd-has-background-color-accent-16</p>

Margin and Padding

Margin and/or padding can be applied on all sides to an element with the following helper classes. These helper classes are structured as .fd-has-margin-{size} and .fd-has-padding-{size}. The following table list all the available options for {size} and it’s rendered value.

{size} options	Value
`none`	0
`tiny`	8px
`small`	16px
`medium`	32px
`large`	48px

Similar to adding margin or padding on all sides of an element, you can use the {side} option to selectively add to a single side. The helper classes for a specific side is structured as .fd-has-margin-{side}-{size} and .fd-has-padding-{side}-{size}. For example to add margin to the bottom on an element you could use a helper class .fd-has-margin-bottom-tiny. To remove margin from the left size of an element you can use the class .fd-has-margin-left-none. The following table lists all the available options for {side} an {size} options

Class structure	{side} options	{size} options
`.fd-has-margin-{side}-{size}`	`top`, `right`, `bottom`, `left`	`none`, `tiny`, `small`, `medium`, `large`
`.fd-has-padding-{side}-{size}`	`top`, `right`, `bottom`, `left`	`none`, `tiny`, `small`, `medium`, `large`

Margin helper classes

.fd-has-margin-none //margin: 0 .fd-has-margin-tiny //margin: 8px .fd-has-margin-small //margin: 16px .fd-has-margin-medium //margin: 32px .fd-has-margin-large//margin: 48px

Removing margin by side using helper classes

.fd-has-margin-top-none .fd-has-margin-right-none .fd-has-margin-bottom-none .fd-has-margin-left-none

Padding helper classes

.fd-has-padding-none .fd-has-padding-tiny .fd-has-padding-small .fd-has-padding-medium .fd-has-padding-large

Removing padding by side using helper classes

.fd-has-padding-top-none .fd-has-padding-right-none .fd-has-padding-bottom-none .fd-has-padding-left-none

<h3> Margin helper classes </h3>
<span class="fd-has-margin-none"> .fd-has-margin-none //margin: 0 </span>
<span class="fd-has-margin-tiny"> .fd-has-margin-tiny //margin: 8px</span>
<span class="fd-has-margin-small"> .fd-has-margin-small //margin: 16px</span>
<span class="fd-has-margin-medium"> .fd-has-margin-medium //margin: 32px</span>
<span class="fd-has-margin-large"> .fd-has-margin-large//margin: 48px</span>

<hr>

<h3> Removing margin by side using helper classes</h3>
<span class="fd-has-margin-medium fd-has-margin-top-none">.fd-has-margin-top-none</span>
<span class="fd-has-margin-medium fd-has-margin-right-none">.fd-has-margin-right-none</span>
<span class="fd-has-margin-medium fd-has-margin-bottom-none">.fd-has-margin-bottom-none</span>
<span class="fd-has-margin-medium fd-has-margin-left-none">.fd-has-margin-left-none</span>

<hr>

<h3> Padding helper classes</h3>
<span class="fd-has-padding-none">.fd-has-padding-none</span>
<span class="fd-has-padding-tiny">.fd-has-padding-tiny</span>
<span class="fd-has-padding-small">.fd-has-padding-small</span>
<span class="fd-has-padding-medium">.fd-has-padding-medium</span>
<span class="fd-has-padding-large">.fd-has-padding-large</span>

<hr>

<h3> Removing padding by side using helper classes</h3>
<span class="fd-has-padding-medium fd-has-padding-top-none">.fd-has-padding-top-none</span>
<span class="fd-has-padding-medium fd-has-padding-right-none">.fd-has-padding-right-none</span>
<span class="fd-has-padding-medium fd-has-padding-bottom-none">.fd-has-padding-bottom-none</span>
<span class="fd-has-padding-medium fd-has-padding-left-none">.fd-has-padding-left-none</span>

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>