# Design Guide

- [Alerts and warnings](/xena-developer/user-interface/styleguide/alertsandwarnings.md): Display information and warnings in a clear way.
- [Buttons](/xena-developer/user-interface/styleguide/buttons.md): Overview of button usage.
- [Colors and fonts](/xena-developer/user-interface/styleguide/fontandcolors.md): Overview of colors and use of fonts.
- [Collapsible](/xena-developer/user-interface/styleguide/collapsible.md): Expand and collapse content.
- [Dropdowns](/xena-developer/user-interface/styleguide/dropdowns.md): Dropdowns are used as menus or shortcuts.
- [Forms](/xena-developer/user-interface/styleguide/forms.md): Build forms for user inputs.
- [Icons](/xena-developer/user-interface/styleguide/icons.md): We use the solid style of Font Awesome 5 icons.
- [Layout](/xena-developer/user-interface/styleguide/layout.md): How to build responsive layouts.
- [Modals](/xena-developer/user-interface/styleguide/modals.md): Modals can be used for dialogs, popups and alike.
- [Navigation](/xena-developer/user-interface/styleguide/navigation.md): There are different options for navigating in views.
- [Pagination](/xena-developer/user-interface/styleguide/pagination.md): Styles of paginations in tables and panels.
- [Panels](/xena-developer/user-interface/styleguide/panels.md): Panels are sections in the interface.
- [Tables](/xena-developer/user-interface/styleguide/tables.md): Present and edit data in tables.
- [Other components](/xena-developer/user-interface/styleguide/components.md): There are different components in Xena that have their own set of CSS classes.