Styleguide

I was working on different apporach how to present informaton in structured way and defined two tipes of components called Tile and Card for that purposes. Table below presents main differences between two of this components such as interaction concept, purpose of use, size, type od presented information and more.

A Tile component is a rectangular-shaped design element used to display information or visual content in a structured way. The main purpose of Tile is to navigate user between similar elements on the page. It is commonly used in user interfaces to present a collection of related items, such as applications, products or events, and should be arranged in a grid or list layout. Typically, a Tile component consists of an image or icon, a title, and a brief description. As an additional elements you can add a subtitle, tag or an action bar. The Tile component convey information or visual content in a well-organized and structured manner.
Moreover, a Tile component can feature additional elements such as:

• a tag to indicate its current state - for example user’s version of application on Dashboard,


• an extra information subtitle - for example to present scheduled maintenance information,


• an IconButton - to offer more interaction within the Tile.

There are two sizes of Tile available - small and large. When working with tiles you have a flexibility in adjusting the tile size to suit your specific purpose. Here's how you can utilize the different tile sizes effectively:

• Small Tiles:
  
  Small tiles are ideal for displaying concise and less detailed content. They are useful for presenting snippets of information combined with icons. Consider using small tiles when you have a compact layout or need to display a larger number of tiles within a limited space. Small tiles can be arranged in a grid or list layout, similar to the guidelines mentioned earlier.


• Large Tiles:
  
  Large tiles are suitable for showcasing more substantial content, such as images, lengthy descriptions. They allow for a more immersive and visually impactful presentation. Use large tiles when you want to draw attention to specific tiles or emphasize key content. Due to their larger size, consider using large tiles in a list layout to provide sufficient space for each tile.

Tile component should be use to navigate user between elements on the page - it can be navigation between applications, between elements on the same page or between sections inside an application. The behavior of the Tile component is similar to that of a button, with the entire tile acting as a clickable area. Component serves as a clickable element that can be interacted with by users by clicking or tapping.

In addition, an IconButton may be included to offer a more action within the Tile. Primary action can be added in a right part of the Tile, for example a primary tile's action on a Dashboard is a Shopping Cart. If more actions is needed - secondary actions may appear in a menu accessible via three dots icon. Interaction concept is similar to an Action column concept in the Table.

The main purpose of Card is to present similar elements on the page and provide necessary information for each element. It can be used in user interfaces to present a collection of related items, such as articles, products or profiles, and should be arranged in a grid or list layout. Typically, a Card component consists of an image or icon, a title, brief description and a action toolbar. As an additional elements you can add a subtitle or a tag.

The Card component operates as a non-interactive entity, requiring users to embed actions within the associated Action Toolbar for functionality. Within the Action Toolbar, users can access a variety of interactive elements, including Buttons, Secondary Buttons, Split Buttons, Icon Buttons, and Links, offering versatile options for combining and executing actions seamlessly within the Card interface. This design approach ensures clear and intuitive interaction pathways while maximizing usability and functionality for users interacting with the Card component.

Card component is presented in couple different states as multiselection mode or disabled.