HYDROGEN

A Component Library

---

Installation Guide

You can use the Hydrogen library by adding our stylesheet to your website. To get started add the following link element in your head element of the HTML file.

<link rel="stylesheet" href="https://hydrogen-ui.netlify.app/style.css" />

Visit docs to learn more.

---

Components Hydrogen Provides

• Avatar

  • Image Avatar
    • Round Image Avatar
    • Square Image Avatar
  • Text Avatar

• Alert

  • Simple Alert
  • Alert With icon
  • Alert with dismiss

• Badge

  • Badge on avatar
  • Badge on icons

• Button

  • Simple button
  • Outline button
  • Disable button
  • Button sizes
  • Button with link and icon
  • Toggle Buttn

• Card

  • Horizantal Card
  • Verical Card
  • Card with text overlay
  • Text only card
  • Card with dismiss

• Image

  • Responsive Image
  • Round Image

• Forms

  • Simple form fields
  • Form with validation

• Typography

  • Headings
  • Text utility classes

• Snackbar

  • Simple snackbar
  • Stacked snackbar

• Grid

  • Grid 20-80 layout
  • Grid 50-50 layout
  • Grid three column layout

• Navigation

  • Simple Navigation

• List

  • Unordered list
  • Ordered list
  • Inline list
  • Notification stacked list

• Modal

  • Simple Modal

• Rating

  • Read only Rating
  • Live rating

• Slider

  • Simple Slider
  • Slider with label
  • Slider with icon

---

Connect With Me

---