A front-end library for building beautiful and memorable user experiences
The library is built with the idea to build the idea of enhancing user experiences, and several user journeys, hence the name odyssey.
This library can be accessed using this link, Odyssey UI.
To use this component library in your project, you must add the below line of code in your main stylesheet (CSS) file,
@import url("https://odysseyui.netlify.app/CSS/odyssey.css");
The library doesn't require any scripts at the moment as all components are purely css.
The list of components which together constitute the library are:
- Headings
- Paragraphs
- Gray Text
- Round Avatars
- Tile Avatars
- Avatars with Initials
- Basic Alerts
- Alerts with Icons
- Alerts with Links
- Alerts with Dismiss
- Badge on Avatars
- Badge on Icons
- Primary & Primary Accent Buttons
- Secondary & Secondary Accent Buttons
- Accent, Link and Gray Buttons
- Floating Action Buttons
- Disabled Buttons
- Round Buttons
- Card with Overlay-text
- Vertical Product Card
- Horizontal Product Card
- Card with Badge
- Card with Box Shadow
- Responsive Image
- Round Image
- Basic Textfields
- Textfields with Italic text, Round Borders & Focus Shadow
- Textfields with text-validation
- Textarea
- Unordered & Ordered List
- Horizontal List
- Stacked List
- Stacked Notification List
- Stacked Notification List with Avatars
- Two-Column Grid
- Three-Column Grid
- Auto-Grid
- Navigation Column
- Navigation Row with Hamburger Button
