Lagom-UI

Introduction of Sudo-UI

Sudo UI is a CSS based component library that you can import in your project and use the pre-defined components as per your requirments.

How to Import it?

Add the following line of code in the head tag of your HTML document.

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

Demo

What are the components provided by Lagom UI?

1. Avatar
2. Alert
3. Badge
4. Button
5. Card
6. Images
7. Input
8. Text-Utilities
9. Lists
10. Navigation
11. Modal
12. Rating
13. Toast
14. Grid
15. Slider

Avatar

An avatar is a graphical representation of a user or the user's character or persona. Learn more about Avatars here.

Types of avatars

• Images avatars
• Fallback text avatars

Alert

Alerts are used to attract user's attention for important information without interrupting the user's flow. Learn more about alerts here.

Type of alerts

• Primary Alert
• Success Alert
• Warning Alert
• Danger Alert

Badge

Badges are used to show user current status, notification counts or any updates. Learn more about badges

Types of Badges

• Badges on avatars
• Badges on icons

Button

Buttons is a clickable interface which is used to perform any action on the web page.

Learn how to use Azure UI's buttons

Type of buttons

• Solid buttons
  • Primary button
  • Secondary button
  • Icon button
  • Float button
  • Link button
• Outline buttons
  • Primary button
  • Secondary button
  • Icon button
  • Float button

Card

Cards are used to show a brief detalis about something. It can be a user or a product or something else.Learn more abour cards here.

Type of cards

• Vertical card
• Horizontal Card
• Card with Badge
• Text only card
• Dismiss card
• Card with text overlay

Image

Images can be responsive to fit their parent element full width. Check the docs here.

Types of images

• Responsive Image
• Rounded Image

Input

Inputs are used to take information from users.

Check the docs here.

Types of inputs

• Textarea
• Input with validation error

Text-Utilities

We have some pre defined text style classes to style your texts. Check the docs here.

type of text-utilities

• Heading text
• Small text
• Grey text
• Aligned text

List

List are used to show some information in a structured way. Check the docs here.

Type of lists

• Normal List
• Stacked List

Modal

Modal are used to grab the user attention and show some important information.

Check the docs here.

Rating

Rating components are used to show customer satisfaction with the product or service.

Check the docs here.

Toast

A toast provides simple feedback about an operation in a small popup.

Check the docs here.

Grid

Grids are used to make complex designs easily.

Check the docs here.

Type of grid

• 50:50 Layout
• 70:30 Layout
• 4 Column layout

Slider

Slider are used to selcet a range.

Check the docs here.