Chroma

Building sites lightening fast

---

Installation Guide

To use styles provided by Chroma, add the following link element in your head element of the HTML file.

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

Components in Chroma

• Avatars

  • Image Avatar
  • Text Avatar

• Alerts

  • Simple Alert
  • Alert with dismiss
  • Alert with icons

• Badges

  • Badge on avatar
  • Badge on icons

• Button

  • Simple button
  • Disable button
  • Button sizes
  • Button with link and icon
  • Floating action and Toggle Button

• Card

  • Card with badge
  • Card with dismiss
  • Card with text overlay
  • Card with text only
  • Horizontal card

• Image

  • Responsive Image
  • Responsive round image

• Forms

  • Simple form
  • Form with validation

• Typography

  • Headings
  • Paragraph text sizes
  • Text Weights
  • Text alignment and gray text

• Snackbar

  • Simple snackbar
  • Stacked snackbar

• Navigation

  • Simple Navigation

---

Let's connect

---