Surfaces

This document describes what are surfaces and how to use them.

Surface

A surface is a container which holds content. It should use a different color from the background which is good for readability.

The main surface component is Ui.Box.

👋 I am on a surface!
<Ui.Box>"👋 I am on a surface!"</Ui.Box>
Multiple Surfaces

You can arrange any number of surfaces on a screen in any number of ways just always make sure that there are gaps between the surfaces.

This gap between signifies the relation between them:

  • Small gaps between surfaces means that they are connected in some way.
  • Large gaps between surfaces means that they hold completely separate content.
You can see that here around this note! There are small gaps above and below which means that this is related to the those surfaces.
I don't have anything to do with that! ➡️
⬅️ Who is that?
I know that! ➡️
⬅️ Hi there!
<>
<Ui.Grid width={Ui.Size.Em(20)} gap={Ui.Size.Em(5)}>
<Ui.Box>"I don't have anything to do with that! ➡️"</Ui.Box>
<Ui.Box>"⬅️ Who is that? "</Ui.Box>
</Ui.Grid>
<Ui.Grid width={Ui.Size.Em(20)} gap={Ui.Size.Em(0.5)}>
<Ui.Box>"I know that! ➡️"</Ui.Box>
<Ui.Box>"⬅️ Hi there! "</Ui.Box>
</Ui.Grid>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.