Fast and lightweight components library to help you create simple, intuitive and beautiful experiences.
Explore algernUI docs »
Copy the link given below and paste it in the head tag of your html, it contains all the component styles shown on this website, which can be easily created using the defined classes.
<link
rel="stylesheet"
href="https://algernui.netlify.app/components/main.css"
/>Here is a quick example to get you started, it's all you need:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://algernui.netlify.app/components/main.css"
/>
</head>
<body>
<div>
<button class="btn btn-primary-solid">Primary Button</button>
</div>
<script src="src/index.js"></script>
</body>
</html>Yes, it's really all you need to get started as you can see in this live and interactive demo:
An avatar is a visual representation of a user or entity
You will find the following types of Alert on https://algernui.netlify.app/components/alert/alert.html
- Primary Alert
- Secondary Alert
- Danger/Error Alert
- Warning Alert
- Success Alert
An avatar is a visual representation of a user or entity
You will find the following types of Avatar on https://algernui.netlify.app/components/avatar/avatar.html
- Different Sized Avatars
Badges are ideal for getting users' attention. They can either represent numeric data or the status of something or someone.
You will find the following types of Badge on https://algernui.netlify.app/components/badge/badge.html
- Badge on Avatars
- Badge on Icons
A button triggers an event or action. They let users know what will happen next.
You will find the following types of Button on https://algernui.netlify.app/components/button/button.html
- Solid Buttons
- Outlined Buttons
- Link Button
- Icon Button
- Floating Button
Cards are containers that display content and actions on a single topic. They display relevant and actionable information.
You will find the following types of Card on https://algernui.netlify.app/components/card/card.html
- Text Card
- Text Card with dismiss and shadow
- Horizontal Card
- Horizontal Card with Badge
- Horizontal Card with Text Overlay
- Vertical Card
- Vertical Card with Badge
- Vertical Card with Text Overlay
You will find the following types of Grid on https://algernui.netlify.app/components/grid/grid.html
- Two items in a grid
- Three items in a grid
- 2-1 grid
An image is a picture or visual representation of a person or thing.
You will find the following types of Image on https://algernui.netlify.app/components/image/image.html
- Responsive Image
- Round Image
Text fields allow users to enter text into a UI. They typically appear in forms and modals.
You will find the following types of Input on https://algernui.netlify.app/components/input/input.html
- Default Input Box with a required field
- Default Textarea
- Different valdation styles
You will find the following types of List on https://algernui.netlify.app/components/list/list.html
- Unordered List
- Ordered List
- Stacked List
You will find the Modal on https://algernui.netlify.app/components/modal/modal.html
You will find the Navbar on https://algernui.netlify.app/components/navbar/navbar.html
You will find the Rating on https://algernui.netlify.app/components/rating/rating.html
You will find the Snackbar on https://algernui.netlify.app/components/snackbar/snackbar.html
You will find the following types of Text Utilities on https://algernui.netlify.app/components/text-utils/textUtils.html
- Headings
- Lead Paragraph (large text)
- Normal Paragraph (medium text)
- Small texts
- Caption/Subtitle text
- Blockquote
- Text align: left, center and right
Special thanks to my team members (team D3) for reviewing this project!