Plenum
Plenum UI Components
A brief overview of the components available in the Plenum UI Library
With Plenum UI we provide an extensive list of customizable components that you can use when designing Enterprise UX Apps for Agility.
To make it easy we've applied the Atomic Design Methodology and organized components into Atoms, Molecules, Organisms and Pages.
Atoms
Like real atoms, these are the fundamental building blocks of your design and interface. These are basic HTML elements that can’t be broken down any further without ceasing to be functional.
• Avatars
Avatars are components that show a profile image or initials of the user and can include a status indicator.
• Badges
Badges are indicators that can be used to label an element. They can be squared or rounded and can include a status indicator or a removal button to hide them.
• Buttons
Buttons are buttons! They take an action when clicked and have a variety of designs depending on their use case.
• Crumbs
Crumbs indicate the location of your current page by separators within the hierarchy of your navigation.
• Icons
Icons can be customized in a variety of ways to fit and work within your UI.
• Loaders
Loaders are a visual indicator that a page or element is loading or that an action is taking place. Plenum UI provides access to both an animated spinning loader as well as a Radial loader that fills with progress.
Molecules
Molecules are groups of bonded atoms that take on distinct new properties, in UI these are groups of elements that function together as a single unit.
• Inputs
This includes Radio Selectors, Check Boxes, Toggles, Text Inputs and more!
• Tabs
A tab is an object that allows multiple documents or panels to be contained within a single window.
Organisms
These are your more complex UI components made up of groups of atoms, molecules, or other organisms. These will be specific and distinct sections of your UI.
• Animated Label Input
A label input that animates when the text field is selected.
• Button Drop-down
A button with a drop-down that can be accessed to select an action
• Empty Section Placeholder
An interactive placeholder for users to select or drag-and-drop an image or attachment
• Form Input With Add-ons
Example text
• Text Input Select
Example text
Pages
Pages are where...
• Card Layout
Example text
• Modal Layout
Example text
Further Reading