Skip to content

Posh UI is a continuously developing Component Library, built using HTML5 and CSS3 only.

License

Notifications You must be signed in to change notification settings

hsnice16/PoshUI-Documentation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

poshui logo

Posh UI

Now design your project faster and better with Posh UI

Forks Stars Netlify Status


Quick Start

To start using the components in your project, Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

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

Many of Posh UI components, like Modal, Toast, and others, require the use of JavaScript to function. For proper functioning of those, Copy-paste the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

    <script 
        src="https://poshui-components.netlify.app/js/main.js">
    </script>

Posh UI contains the following components


Alert

Alerts can be used to show a message to the user.

You will find the following types of Alert on https://poshui.netlify.app/pages/components/alert.html

  • Danger Alert
  • Info Alert
  • Primary Alert
  • Secondary Alert
  • Success Alert
  • Warning Alert

Avatar

Avatars can be used for user profile picture.

You will find the following types of Avatar on https://poshui.netlify.app/pages/components/avatar.html

  • Same Sized Avatars
  • Different Sized Avatars

Badge

Badge can be used to show either status of the user (online, or offline) or you can use it show notification count.

You will find the following types of Badge on https://poshui.netlify.app/pages/components/badge.html

  • Badge on Icons
  • Badge on Avatars

Button

Buttons can be used to make your web page interactive to your user. You can use them to take user action.

You will find the following types of Button on https://poshui.netlify.app/pages/components/button.html

  • Filled Primary Buttons
  • Outlined Primary Buttons
  • Link Button
  • Icon Button
  • Floating Button

Card

Cards can be proved very useful. You can use them to display content on an e-commerce app, or on a video library app. You can also use them to show user feedback in the form of text-only card on your site.

You will find the following types of Card on https://poshui.netlify.app/pages/components/card.html

  • Horizontal Text Card
  • Vertical Item Card
  • Text Overlay Card
  • Dismiss Card with Shadow

CSS Grid

CSS Grid can be used to structure elements in rows and columns.

You will find the following types of Grid on https://poshui.netlify.app/pages/layout/css-grid.html

  • Two Columns Grid
  • Two Rows Grid
  • Three Columns Grid
  • Three Columns Grid

Image

Image can be used to display large picture on the website.

You will find the following types of Image on https://poshui.netlify.app/pages/components/image.html

  • Round Image
  • Square Image
  • Responsive Image

Input

Input can be used to take input from your user. It can make your site more interactive.

You will find the following types of Input on https://poshui.netlify.app/pages/components/input.html

  • Text Area
  • Form Input
  • Error Form Input

List

List can be used to show a list of items.

You will find the following types of List on https://poshui.netlify.app/pages/components/list.html

  • Numbered List
  • Reversed List
  • Lower Roman List
  • Lower Alpha List
  • Disc List
  • Circle List
  • Square List
  • Category Checkbox List
  • Price Radio List
  • Notification Stacked List

Modal

Modal can be used for creating dialog boxes, to communicate with user.

You will find the following types of Modal on https://poshui.netlify.app/pages/components/modal.html

  • Modal Component
  • Modal Demo

Navigation

Navigation can be used to give the user facility to navigate between different pages.

You will find the following types of Navigation on https://poshui.netlify.app/pages/components/navigation.html

  • Desktop Variation One

Rating

Rating can be used to show ratings on the product, or it can also be used for taking ratings from the user.

You will find the following types of Rating on https://poshui.netlify.app/pages/components/rating.html

  • Filled Rating
  • Live Rating

Slider

Slider can be used to take user input based on some range.

You will find the following type of Slider on https://poshui.netlify.app/pages/components/slider.html

  • Input Slider

Toast

Toast can be used to show notifications to the user.

You will find the following types of Toast on https://poshui.netlify.app/pages/components/toast.html

  • Notification Toast
  • Notification Toast Demo
  • Stacked Notification Toast Demo

Tooltip

Tooltip can be used to show user some information, when user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.

You will find the following types of Tooltip on https://poshui.netlify.app/pages/components/tooltip.html

  • Left Tooltip
  • Right Tooltip

Typography

Use Typography to format text content on your web site.

You will find the following types of Typography on https://poshui.netlify.app/pages/getting-started/typography.html

  • Display
  • Headings
  • Alignment
  • Inline text elements

👨‍💻 Connect with me


posh ui gif


Have a look at the implementation of Posh UI Components.

About

Posh UI is a continuously developing Component Library, built using HTML5 and CSS3 only.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published