The purpose of a Float is to provide a convenient and prominent way for users to identify key information within an application or interface. They are commonly used for things such as categorization of content(icon), or indicating key aspects such as a date or pricing.
Anatomy
A float has two parts, one is the icon and the other the info, and the two can combine to create one singular float.
- Icon container. Using background color color-brand-400.
- Icon. In this instance the windmill icon using color-base-100.
- Info container. Using background color color-base-400.
- Title. Using paragraph-small-Bold in color-brand-400.
- Label. Using paragraph-cell in color-brand-400.
- Shadow. Using a custom drop shadow preset.