Skip to content
Home

UI inspiration

To see how individual elements and components fit together in a typical application, here are some partial and full examples to view for inspiration regarding spacing and composition.

Be aware that the default text styling in Eufemia does not include top and bottom margins or paddings as we see in the alternating form sections below. These spacings must be designed by the designer using the spatial system and incorporated into the design by the developer.

The first image below shows how the final form looks. The second image highlights some of the vertical and horizontal spacing in the design.

Example of a form
Form example with alternating sections

Using Eufemia's spatial system for layout

Even though there is a lot of freedom built into the Eufemia system regarding how UI layout designs should be, it is recommended to use the standard spacers found in the Eufemia library to attain a visually consistent look. The example above is laid out with the standard spacers and these are highlighted in the duplicate example below:

Example of a form with spacing highlighted
Form example with vertical spacing and some horizontal highlighted