Folder Organisation
The folder structure has 2 branches: Description and Components (annotation given by the folder name, e.g. Basic Elements).
In the Description folder, you can find all the names for the components, and the actual components are reachable by the second folder: Components. We arranged it this way so you will be able to easily handle the elements without having to deal with the title on drag&drop.
First folder from Description is called Title and it represents the name of the file. You then have a list of the elements' titles (e.g. Buttons). Each element of the list of made of a Category folder, which contains the name of the component, and a Subcategory folder, if it has subcategories (e.g. for Buttons, which have the Style subcategory).
These titles have the role of information stamps and are there to help you identify the elements.
The elements are organised by folders, as intuitively as possible.
Let's take for example the Colors folder, which has all the buttons on the left. If you open the Colors folder further, you will have a folder for every button.
The elements are structured this way so that you can delete/hide an unwanted element with ease.
Hover
Hover actions are illustrated with the help of the pointer hand. Whenever the hand appears, it suggests that the specific area is in a hover state. Hover has a separate folder, that can be visible or hidden on demand.
In the example given (of pagination with no border), the number 1 has the hover state. In the folder structure, this is always represented by the folder with the color red. In this way, you can easily track down the folders with the hover state and activate or deactivate them.
Focus
Focus elements do not have a visual element pointing to them. In the picture on the left you can see an example for the datepicker: first part shows it activated and the second de-activated.
Same as with the hover state, the focus state has a separate folder that can be activated and de-activated easily. While the structure remains the same, we choose a different color: orange to better differentiate.