# Hydrogen An open-source, modular component library and CSS utility.

## Installation **Install Hydrogen** `npm install @hydrogen-design-system/system --save-dev` **Import Hydrogen into your Sass** ``` @use "../node_modules/@hydrogen-design-system/system/dist/import/latest/core/styles/defaults" with ( // Put custom variables here. ); @use "../node_modules/@hydrogen-design-system/system/dist/import/latest/system.scss"; ``` **Load Hydrogen's JavaScript** ``` https://cdn.jsdelivr.net/gh/hydrogen-design-system/system/dist/compiled/latest/system.min.js ``` **Add the activation attribute to your page** ``` ``` ## Available Components - [accordions](https://github.com/hydrogen-design-system/component-accordion) - [alerts](https://github.com/hydrogen-design-system/component-alert) - [blockquotes](https://github.com/hydrogen-design-system/component-blockquote) - [breadcrumbs](https://github.com/hydrogen-design-system/component-breadcrumb) - [buttons](https://github.com/hydrogen-design-system/component-button) - [cards](https://github.com/hydrogen-design-system/component-card) - [dialogs](https://github.com/hydrogen-design-system/component-dialog) - [form inputs](https://github.com/hydrogen-design-system/component-forms) - checkboxes - dates - email - fieldsets - numbers - passwords - radio groups - select inputs - telephone - text inputs - textareas - urls - [horizontal rules](https://github.com/hydrogen-design-system/component-horizontal-rule) - [iframes](https://github.com/hydrogen-design-system/component-iframe) - [menus](https://github.com/hydrogen-design-system/component-menu) - [overlays](https://github.com/hydrogen-design-system/component-overlay) - [pullquotes](https://github.com/hydrogen-design-system/component-pullquote) - [skip-to-content links](https://github.com/hydrogen-design-system/component-skip-to-content) - [tables](https://github.com/hydrogen-design-system/component-table) - [tags](https://github.com/hydrogen-design-system/component-tag) ## Available Property Attributes - alignment - background colors - borders - containers - display values - grid & grid items - fonts - font color - font families - font sizes - font styles - font weights - headings - hover effects - hover background colors - hover font colors - margins - padding - positioning - radius - visibilities