SUSE Product brand

Atomic design classification

All elements, components, guides, and more are delivered following the atomic design methodology. We have grouped them inside the next 4 cards for you to get a better overview of how we are building EOS.

Atoms

The smallest building blocks of your project. Text styles, buttons, icons, input fields, checkboxes, etc.

Atoms: Buttons, Colors, Icons, Patterns, Typography, Writing guides, Badges, Checkbox, Radio buttons, Text area, Input fields, Select, Toggle, Links, Tooltips

Molecules

More complex entities consisting of several atoms. Things like notification toasts, data values (label: value), input fields with buttons, etc.

Molecules: Alerts, Dropdown, Address, Pagination, Tables, Cards

Organisms

Truly functional parts of a page, made from groups of atoms and molecules.

Organisms: Main menu, Submenu

Templates

Essentially, those are pages without real content. Text styles, buttons, icons, input fields, checkboxes, etc.

Templates: Main layout, Sign in, Error page