├── LICENSE ├── README.md ├── app.css ├── assets ├── brand-logos │ ├── android-chrome-192x192.png │ ├── apple-touch-icon.png │ ├── brand-logo.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── favicon.ico ├── gifs │ └── posh-ui.gif ├── jpegs │ ├── black-panther.jpg │ ├── captain-america.jpg │ ├── do-something-great.jpg │ ├── eternals.jpg │ ├── hulk-bobblehead.jpg │ ├── iron-man.jpg │ ├── marvel.jpg │ ├── spider-man.jpg │ └── stanlee.jpg ├── pngs │ └── logo-bg-stone.png └── svgs │ ├── female-avatar.svg │ └── male-avatar.svg ├── css ├── docs.css └── pages │ ├── components │ └── list.css │ └── layout │ └── css-grid.css ├── index.html ├── js ├── app.js └── pages │ └── components │ └── navigation.js └── pages ├── components ├── alert.html ├── avatar.html ├── badge.html ├── button.html ├── card.html ├── image.html ├── input.html ├── list.html ├── modal.html ├── navigation.html ├── rating.html ├── slider.html ├── toast.html └── tooltip.html ├── getting-started ├── color.html ├── introduction.html └── typography.html └── layout └── css-grid.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Himanshu Singh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | # Posh UI 6 | 7 | Now design your project faster and better with Posh UI 8 | 9 | ![Forks](https://img.shields.io/github/forks/hsnice16/PoshUI-Documentation) 10 | ![Stars](https://img.shields.io/github/stars/hsnice16/PoshUI-Documentation) 11 | [![Netlify Status](https://api.netlify.com/api/v1/badges/a1fe7d1f-75e9-4c30-bd3a-8df76d74c08c/deploy-status)](https://app.netlify.com/sites/poshui/deploys) 12 | 13 |

14 | 15 | --- 16 | 17 | ## Quick Start 18 | 19 | To start using the components in your project, Copy-paste the stylesheet `` into your `` before all other stylesheets to load our CSS. 20 | 21 | ```html 22 | 26 | ``` 27 | 28 | 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 ` 34 | ``` 35 | 36 | ### Posh UI contains the following components 37 | 38 | - [Alert](#alert) 39 | - [Avatar](#avatar) 40 | - [Badge](#badge) 41 | - [Button](#button) 42 | - [Card](#card) 43 | - [CSS Grid](#css-grid) 44 | - [Image](#image) 45 | - [Input](#input) 46 | - [List](#list) 47 | - [Modal](#modal) 48 | - [Navigation](#navigation) 49 | - [Rating](#rating) 50 | - [Slider](#slider) 51 | - [Toast](#toast) 52 | - [Tooltip](#tooltip) 53 | - [Typography](#typography) 54 | 55 | --- 56 | 57 | ### Alert 58 | 59 | Alerts can be used to show a message to the user. 60 | 61 | You will find the following types of _Alert_ on https://poshui.netlify.app/pages/components/alert.html 62 | 63 | - Danger Alert 64 | - Info Alert 65 | - Primary Alert 66 | - Secondary Alert 67 | - Success Alert 68 | - Warning Alert 69 | 70 | --- 71 | 72 | ### Avatar 73 | 74 | Avatars can be used for user profile picture. 75 | 76 | You will find the following types of _Avatar_ on https://poshui.netlify.app/pages/components/avatar.html 77 | 78 | - Same Sized Avatars 79 | - Different Sized Avatars 80 | 81 | --- 82 | 83 | ### Badge 84 | 85 | Badge can be used to show either status of the user (online, or offline) or you can use it show notification count. 86 | 87 | You will find the following types of _Badge_ on https://poshui.netlify.app/pages/components/badge.html 88 | 89 | - Badge on Icons 90 | - Badge on Avatars 91 | 92 | --- 93 | 94 | ### Button 95 | 96 | Buttons can be used to make your web page interactive to your user. You can use them to take user action. 97 | 98 | You will find the following types of _Button_ on https://poshui.netlify.app/pages/components/button.html 99 | 100 | - Filled Primary Buttons 101 | - Outlined Primary Buttons 102 | - Link Button 103 | - Icon Button 104 | - Floating Button 105 | 106 | --- 107 | 108 | ### Card 109 | 110 | 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. 111 | 112 | You will find the following types of _Card_ on https://poshui.netlify.app/pages/components/card.html 113 | 114 | - Horizontal Text Card 115 | - Vertical Item Card 116 | - Text Overlay Card 117 | - Dismiss Card with Shadow 118 | 119 | --- 120 | 121 | ### CSS Grid 122 | 123 | CSS Grid can be used to structure elements in rows and columns. 124 | 125 | You will find the following types of _Grid_ on https://poshui.netlify.app/pages/layout/css-grid.html 126 | 127 | - Two Columns Grid 128 | - Two Rows Grid 129 | - Three Columns Grid 130 | - Three Columns Grid 131 | 132 | --- 133 | 134 | ### Image 135 | 136 | Image can be used to display large picture on the website. 137 | 138 | You will find the following types of _Image_ on https://poshui.netlify.app/pages/components/image.html 139 | 140 | - Round Image 141 | - Square Image 142 | - Responsive Image 143 | 144 | --- 145 | 146 | ### Input 147 | 148 | Input can be used to take input from your user. It can make your site more interactive. 149 | 150 | You will find the following types of _Input_ on https://poshui.netlify.app/pages/components/input.html 151 | 152 | - Text Area 153 | - Form Input 154 | - Error Form Input 155 | 156 | --- 157 | 158 | ### List 159 | 160 | List can be used to show a list of items. 161 | 162 | You will find the following types of _List_ on https://poshui.netlify.app/pages/components/list.html 163 | 164 | - Numbered List 165 | - Reversed List 166 | - Lower Roman List 167 | - Lower Alpha List 168 | - Disc List 169 | - Circle List 170 | - Square List 171 | - Category Checkbox List 172 | - Price Radio List 173 | - Notification Stacked List 174 | 175 | --- 176 | 177 | ### Modal 178 | 179 | Modal can be used for creating dialog boxes, to communicate with user. 180 | 181 | You will find the following types of _Modal_ on https://poshui.netlify.app/pages/components/modal.html 182 | 183 | - Modal Component 184 | - Modal Demo 185 | 186 | --- 187 | 188 | ### Navigation 189 | 190 | Navigation can be used to give the user facility to navigate between 191 | different pages. 192 | 193 | You will find the following types of _Navigation_ on https://poshui.netlify.app/pages/components/navigation.html 194 | 195 | - Desktop Variation One 196 | 197 | --- 198 | 199 | ### Rating 200 | 201 | Rating can be used to show ratings on the product, or it can also be 202 | used for taking ratings from the user. 203 | 204 | You will find the following types of _Rating_ on https://poshui.netlify.app/pages/components/rating.html 205 | 206 | - Filled Rating 207 | - Live Rating 208 | 209 | --- 210 | 211 | ### Slider 212 | 213 | Slider can be used to take user input based on some range. 214 | 215 | You will find the following type of _Slider_ on https://poshui.netlify.app/pages/components/slider.html 216 | 217 | - Input Slider 218 | 219 | --- 220 | 221 | ### Toast 222 | 223 | Toast can be used to show notifications to the user. 224 | 225 | You will find the following types of _Toast_ on https://poshui.netlify.app/pages/components/toast.html 226 | 227 | - Notification Toast 228 | - Notification Toast Demo 229 | - Stacked Notification Toast Demo 230 | 231 | --- 232 | 233 | ### Tooltip 234 | 235 | 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. 236 | 237 | You will find the following types of _Tooltip_ on https://poshui.netlify.app/pages/components/tooltip.html 238 | 239 | - Left Tooltip 240 | - Right Tooltip 241 | 242 | --- 243 | 244 | ### Typography 245 | 246 | Use Typography to format text content on your web site. 247 | 248 | You will find the following types of _Typography_ on https://poshui.netlify.app/pages/getting-started/typography.html 249 | 250 | - Display 251 | - Headings 252 | - Alignment 253 | - Inline text elements 254 | 255 | --- 256 | 257 | ## 👨‍💻 Connect with me 258 | 259 |

260 |

261 | 262 | --- 263 | 264 | ![posh ui gif](assets/gifs/posh-ui.gif) 265 | 266 | --- 267 | 268 |

269 | 270 | Have a look at the implementation of [Posh UI Components](https://github.com/hsnice16/PoshUI-Components). 271 | 272 |

273 | -------------------------------------------------------------------------------- /app.css: -------------------------------------------------------------------------------- 1 | @import url("css/docs.css"); 2 | 3 | :root { 4 | /* variables are coming from https://poshui-components.netlify.app/css/main.css */ 5 | --COLOR-BACKGROUND: var(--COLOR-SLATE-50); 6 | 7 | --COLOR-BRAND: var(--COLOR-GLOSSY-BLUE-500); 8 | --COLOR-BRAND-DARK: var(--COLOR-GLOSSY-BLUE-700); 9 | --COLOR-BRAND-LIGHT: var(--COLOR-GLOSSY-BLUE-100); 10 | 11 | --COLOR-TEXT: var(--COLOR-SLATE-700); 12 | --COLOR-TEXT-300: var(--COLOR-SLATE-300); 13 | } 14 | 15 | html { 16 | font-size: 62.5%; 17 | scroll-behavior: smooth; 18 | } 19 | 20 | body { 21 | background: var(--COLOR-BACKGROUND); 22 | font-size: 1.6rem; 23 | } 24 | 25 | /* Container */ 26 | .container { 27 | color: var(--COLOR-TEXT); 28 | min-height: 100vh; 29 | max-width: 140rem; 30 | } 31 | 32 | /* Link */ 33 | /* aside-left-container is present in docs.css */ 34 | .link, 35 | .aside-left-container a { 36 | color: var(--COLOR-TEXT); 37 | font-size: 2rem; 38 | position: relative; 39 | } 40 | 41 | .link::after, 42 | .aside-left-container a::after { 43 | background: var(--COLOR-TEXT); 44 | content: ""; 45 | display: block; 46 | height: 1px; 47 | left: 50%; 48 | position: absolute; 49 | transition: width 0.2s, left 0.2s; 50 | width: 0; 51 | } 52 | 53 | .link:hover::after, 54 | .aside-left-container a:hover::after { 55 | left: 0; 56 | width: 100%; 57 | } 58 | 59 | .link-active, 60 | .aside-left-container a.link-active { 61 | color: var(--COLOR-BRAND); 62 | font-weight: 600; 63 | } 64 | 65 | .link-active::after, 66 | .aside-left-container a.link-active::after { 67 | background: var(--COLOR-BRAND); 68 | } 69 | 70 | /* Header */ 71 | .btn-theme { 72 | background: unset; 73 | border: none; 74 | color: var(--COLOR-TEXT); 75 | font-size: 2rem; 76 | } 77 | 78 | /* Home */ 79 | .btn-home { 80 | box-shadow: 0.5rem 0.5rem 0.5rem 0.1rem var(--COLOR-TEXT-300); 81 | font-size: 2rem; 82 | margin: 3rem 1rem 1rem 0; 83 | width: 20rem; 84 | } 85 | 86 | .btn-home-outline:hover { 87 | background: var(--COLOR-BACKGROUND); 88 | color: var(--COLOR-BRAND); 89 | } 90 | 91 | .footer-home { 92 | border-top: thin solid var(--COLOR-TEXT-300); 93 | justify-content: center; 94 | min-height: 15vh; 95 | } 96 | 97 | .footer-home, 98 | .header { 99 | align-items: center; 100 | display: flex; 101 | flex-wrap: wrap; 102 | padding: 1rem 4rem; 103 | } 104 | 105 | .header { 106 | border-bottom: thin solid var(--COLOR-TEXT-300); 107 | } 108 | 109 | .header .img-brand-logo { 110 | max-height: 7rem; 111 | max-width: 7rem; 112 | } 113 | 114 | .link-brand { 115 | color: var(--COLOR-BRAND); 116 | font-size: 3.5rem; 117 | } 118 | 119 | .main { 120 | align-items: center; 121 | display: flex; 122 | font-size: 2.5rem; 123 | justify-content: center; 124 | min-height: 75vh; 125 | padding: 1.5rem; 126 | } 127 | 128 | .main div { 129 | font-size: 2.5rem; 130 | max-width: 55rem; 131 | text-align: center; 132 | } 133 | 134 | /* Dark Theme */ 135 | [data-theme="dark"] { 136 | --COLOR-BACKGROUND: #22272e; 137 | --COLOR-CODE-BG: #2d333b; 138 | --COLOR-TEXT: #adbac7; 139 | --COLOR-TEXT-300: #8d97a0; 140 | } 141 | 142 | [data-theme="dark"] .text-slate-800 { 143 | color: var(--COLOR-TEXT); 144 | } 145 | 146 | [data-theme="dark"] .btn-home { 147 | box-shadow: 0.1rem 0.1rem 0.5rem var(--COLOR-TEXT-300); 148 | } 149 | 150 | [data-theme="dark"] .component-container { 151 | background: var(--COLOR-CODE-BG); 152 | border-color: var(--COLOR-CODE-BG); 153 | } 154 | 155 | [data-theme="dark"] :is(.card, .grid, .modal, .stacked-list li) { 156 | color: var(--COLOR-BACKGROUND); 157 | } 158 | 159 | [data-theme="dark"] .badge-btn { 160 | color: var(--COLOR-TEXT); 161 | } 162 | 163 | [data-theme="dark"] :is(table, tr) { 164 | border-color: var(--COLOR-BACKGROUND); 165 | } 166 | 167 | [data-theme="dark"] tbody tr:nth-child(even) { 168 | background: var(--COLOR-BACKGROUND); 169 | } 170 | 171 | /* Media Query */ 172 | /* 173 | .docs, 174 | .aside-right, 175 | .aside-right-container, 176 | .component-container, 177 | .link-to-top, 178 | .footer-docs, 179 | .main-docs 180 | are present in docs.css 181 | */ 182 | @media only screen and (max-width: 63em) { 183 | .docs { 184 | grid-template-areas: 185 | "header header" 186 | "aside-left main"; 187 | grid-template-columns: 25rem minmax(0, 1fr); 188 | } 189 | 190 | .aside-right, 191 | .aside-right-container { 192 | display: none; 193 | } 194 | 195 | .component-container > .grid { 196 | grid-template-columns: minmax(0, 1fr); 197 | } 198 | 199 | .link-to-top { 200 | display: unset; 201 | } 202 | } 203 | 204 | @media only screen and (max-width: 59em) { 205 | .docs { 206 | grid-template-columns: 20rem minmax(0, 1fr); 207 | } 208 | 209 | .aside-left-container { 210 | margin-left: 3rem; 211 | } 212 | } 213 | 214 | @media only screen and (max-width: 44em) { 215 | .docs { 216 | grid-template-areas: 217 | "header" 218 | "main"; 219 | grid-template-columns: minmax(0, 1fr); 220 | } 221 | 222 | .aside-left, 223 | .aside-left-container { 224 | display: none; 225 | } 226 | 227 | .container { 228 | padding: 0.5rem; 229 | } 230 | 231 | .footer-docs { 232 | display: flex; 233 | } 234 | 235 | .header { 236 | padding: 1rem 0.5rem; 237 | } 238 | 239 | .link-to-top { 240 | display: none; 241 | } 242 | 243 | .main-docs { 244 | padding: 3.5rem 0.5rem; 245 | } 246 | } 247 | 248 | @media only screen and (max-width: 40em) { 249 | html { 250 | font-size: 60%; 251 | } 252 | 253 | .docs { 254 | grid-template-rows: 12rem 1fr; 255 | } 256 | 257 | .header { 258 | height: 12rem; 259 | } 260 | 261 | .main div { 262 | font-size: 2rem; 263 | } 264 | } 265 | -------------------------------------------------------------------------------- /assets/brand-logos/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/brand-logos/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/brand-logos/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/brand-logos/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/brand-logos/brand-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/brand-logos/brand-logo.png -------------------------------------------------------------------------------- /assets/brand-logos/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/brand-logos/favicon-16x16.png -------------------------------------------------------------------------------- /assets/brand-logos/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/brand-logos/favicon-32x32.png -------------------------------------------------------------------------------- /assets/brand-logos/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/brand-logos/favicon.ico -------------------------------------------------------------------------------- /assets/gifs/posh-ui.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/gifs/posh-ui.gif -------------------------------------------------------------------------------- /assets/jpegs/black-panther.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/black-panther.jpg -------------------------------------------------------------------------------- /assets/jpegs/captain-america.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/captain-america.jpg -------------------------------------------------------------------------------- /assets/jpegs/do-something-great.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/do-something-great.jpg -------------------------------------------------------------------------------- /assets/jpegs/eternals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/eternals.jpg -------------------------------------------------------------------------------- /assets/jpegs/hulk-bobblehead.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/hulk-bobblehead.jpg -------------------------------------------------------------------------------- /assets/jpegs/iron-man.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/iron-man.jpg -------------------------------------------------------------------------------- /assets/jpegs/marvel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/marvel.jpg -------------------------------------------------------------------------------- /assets/jpegs/spider-man.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/spider-man.jpg -------------------------------------------------------------------------------- /assets/jpegs/stanlee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/jpegs/stanlee.jpg -------------------------------------------------------------------------------- /assets/pngs/logo-bg-stone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hsnice16/PoshUI-Documentation/91907ab0a480cec02457a67333e48749a103f3ec/assets/pngs/logo-bg-stone.png -------------------------------------------------------------------------------- /assets/svgs/female-avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svgs/male-avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/docs.css: -------------------------------------------------------------------------------- 1 | /* 2 | Contains CSS code for the pages user can visit using docs navbar option 3 | */ 4 | .docs { 5 | display: grid; 6 | grid-template-areas: 7 | "header header header" 8 | "aside-left main aside-right"; 9 | grid-template-columns: 25rem minmax(0, 1fr) 20rem; 10 | grid-template-rows: 8rem 1fr; 11 | } 12 | 13 | /* Asides */ 14 | .aside-container { 15 | background: var(--COLOR-BACKGROUND); 16 | position: fixed; 17 | } 18 | 19 | .aside-container li { 20 | margin: 1.2rem 0.4rem; 21 | } 22 | 23 | .aside-left { 24 | grid-area: aside-left; 25 | } 26 | 27 | .aside-left-container { 28 | display: flex; 29 | flex-direction: column; 30 | height: 80vh; 31 | margin: 1rem 1rem 3rem 6rem; 32 | padding: 0 2rem 0.5rem 0; 33 | overflow-y: auto; 34 | } 35 | 36 | .aside-left-container input[type="checkbox"] { 37 | display: none; 38 | } 39 | 40 | .aside-left-container label { 41 | cursor: pointer; 42 | display: inline-block; 43 | font-size: 2rem; 44 | font-weight: bold; 45 | } 46 | 47 | .aside-left-container ul { 48 | display: none; 49 | } 50 | 51 | .aside-left-container li a { 52 | font-size: 1.8rem; 53 | } 54 | 55 | .aside-left-container input[type="checkbox"] + label svg { 56 | transition: transform 0.3s; 57 | } 58 | 59 | .aside-left-container input[type="checkbox"]:checked + label svg { 60 | transform: rotate(90deg); 61 | } 62 | 63 | .aside-left-container input[type="checkbox"]:checked + label + ul { 64 | display: block; 65 | } 66 | 67 | .aside-right { 68 | grid-area: aside-right; 69 | } 70 | 71 | .aside-right-container { 72 | margin: 1rem 2rem 3rem 1rem; 73 | } 74 | 75 | .aside-right-container a { 76 | color: var(--COLOR-TEXT); 77 | } 78 | 79 | .aside-right-container a:hover { 80 | color: var(--COLOR-BRAND); 81 | } 82 | 83 | /* Component Container */ 84 | .component-container { 85 | align-items: center; 86 | background: var(--COLOR-WHITE); 87 | border: thin solid var(--COLOR-BRAND-LIGHT); 88 | border-radius: 0.5rem; 89 | overflow: hidden; 90 | } 91 | 92 | .component-container > div:not(.grid) { 93 | padding: 2rem 2rem 0; 94 | } 95 | 96 | /* Footer Docs */ 97 | .footer-docs { 98 | align-items: center; 99 | background: var(--COLOR-BACKGROUND); 100 | border-top: thin solid var(--COLOR-BRAND-LIGHT); 101 | bottom: 0; 102 | display: none; 103 | height: 5rem; 104 | left: 0; 105 | margin: 0 0.5rem; 106 | padding: 1rem 0.5rem; 107 | position: fixed; 108 | right: 0; 109 | z-index: 1; 110 | } 111 | 112 | /* Header Docs */ 113 | .header-docs { 114 | background: var(--COLOR-BACKGROUND); 115 | grid-area: header; 116 | position: sticky; 117 | top: 0; 118 | z-index: 1; 119 | } 120 | 121 | /* Introduction Page */ 122 | .intro-pre { 123 | margin-top: -2rem; 124 | } 125 | 126 | .link.intro-github { 127 | color: var(--COLOR-BRAND-DARK); 128 | } 129 | 130 | p > code.hljs { 131 | color: var(--COLOR-BRAND-DARK); 132 | display: inline-block; 133 | font-weight: bold; 134 | margin: 0.5rem; 135 | } 136 | 137 | /* Link to Top */ 138 | .link-to-top { 139 | bottom: 0; 140 | display: none; 141 | margin-bottom: 2rem; 142 | margin-right: 2rem; 143 | position: fixed; 144 | right: 0; 145 | } 146 | 147 | /* Main Docs */ 148 | h2[id] { 149 | padding-top: 10rem; 150 | margin-top: -8rem; 151 | } 152 | 153 | .main-docs { 154 | grid-area: main; 155 | padding: 2.5rem 2rem 3rem 4rem; 156 | } 157 | 158 | .main-text { 159 | font-size: 1.8rem; 160 | line-height: 1.5em; 161 | } 162 | 163 | /* Overidding */ 164 | #modal-component .modal { 165 | z-index: 0; 166 | } 167 | 168 | #desktop-one-container, 169 | #mobile-one-container, 170 | #modal-container, 171 | .stacked-toast, 172 | .toast { 173 | z-index: 3; 174 | } 175 | 176 | .section-component .component-container .nav-container { 177 | width: 95%; 178 | } 179 | 180 | .toast:not(.hide, .show) { 181 | z-index: 0; 182 | } 183 | 184 | /* Pre Code */ 185 | .pre-code { 186 | margin-bottom: -5rem; 187 | width: 100%; 188 | } 189 | 190 | code.hljs { 191 | background: var(--COLOR-BRAND-LIGHT); 192 | font-size: 1.6rem; 193 | line-height: 1.5em; 194 | } 195 | 196 | /* Section */ 197 | .section-component { 198 | border-top: thin solid var(--COLOR-BRAND-LIGHT); 199 | } 200 | 201 | .section-text { 202 | font-size: 1.65rem; 203 | line-height: 1.5em; 204 | } 205 | -------------------------------------------------------------------------------- /css/pages/components/list.css: -------------------------------------------------------------------------------- 1 | .component-container li { 2 | margin: 0.5rem 2rem; 3 | } 4 | -------------------------------------------------------------------------------- /css/pages/layout/css-grid.css: -------------------------------------------------------------------------------- 1 | /* variables are coming from https://poshui-components.netlify.app/css/main.css */ 2 | .grid { 3 | background: var(--COLOR-LIME-200); 4 | border-radius: 0.2rem; 5 | padding: 1rem; 6 | } 7 | 8 | .grid > div { 9 | background: var(--COLOR-LIME-500); 10 | border-radius: 0.2rem; 11 | font-weight: bold; 12 | padding: 1rem; 13 | } 14 | 15 | .grid:is(.grid-cols-2, .grid-cols-3) > div { 16 | margin: auto 0.5rem; 17 | } 18 | 19 | .grid:is(.grid-rows-2, .grid-rows-3) > div { 20 | margin: 0.5rem 0; 21 | } 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Now design your project Faster and Better 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 45 | 46 | 47 |

48 | 83 | 84 |

85 |

86 |

87 | Now design your project faster and better with 88 | Posh UI 89 |

90 | 91 | 92 | 95 | 96 | 97 | 101 | 106 | 107 |

108 |

109 | 110 | 154 |

155 | 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const btnTheme = document.querySelector(".btn-theme"); 2 | const htmlElement = document.documentElement; 3 | const moonIcon = document.querySelector(".btn-theme .fa-moon"); 4 | 5 | btnTheme.addEventListener("click", () => { 6 | if (!htmlElement.hasAttribute("data-theme")) { 7 | htmlElement.setAttribute("data-theme", "dark"); 8 | localStorage.setItem("poshUITheme", "dark"); 9 | } else { 10 | htmlElement.removeAttribute("data-theme"); 11 | localStorage.removeItem("poshUITheme"); 12 | } 13 | 14 | moonIcon.classList.toggle("fas"); 15 | }); 16 | 17 | (() => { 18 | const theme = localStorage.getItem("poshUITheme"); 19 | 20 | if (theme) { 21 | htmlElement.setAttribute("data-theme", "dark"); 22 | moonIcon.classList.add("fas"); 23 | } 24 | })(); 25 | -------------------------------------------------------------------------------- /js/pages/components/navigation.js: -------------------------------------------------------------------------------- 1 | /******************** Desktop Variation One ********************/ 2 | 3 | const desktopOneDemoBtn = document.querySelector("#desktop-one-demo-btn"); 4 | const desktopOneContainer = document.querySelector("#desktop-one-container"); 5 | 6 | if (desktopOneDemoBtn) { 7 | desktopOneDemoBtn.addEventListener("click", () => { 8 | // d-none ---> display: none; 9 | desktopOneContainer.classList.remove("d-none"); 10 | }); 11 | } 12 | 13 | if (desktopOneContainer) { 14 | desktopOneContainer.addEventListener("click", (event) => { 15 | if (event.currentTarget === event.target) 16 | desktopOneContainer.classList.add("d-none"); 17 | }); 18 | } 19 | 20 | /******************** Mobile Variation One ********************/ 21 | 22 | const mobileOneDemoBtn = document.querySelector("#mobile-one-demo-btn"); 23 | const mobileOneContainer = document.querySelector("#mobile-one-container"); 24 | 25 | if (mobileOneDemoBtn) { 26 | mobileOneDemoBtn.addEventListener("click", () => { 27 | // d-none ---> display: none; 28 | mobileOneContainer.classList.remove("d-none"); 29 | }); 30 | } 31 | 32 | if (mobileOneContainer) { 33 | mobileOneContainer.addEventListener("click", (event) => { 34 | if (event.currentTarget === event.target) 35 | mobileOneContainer.classList.add("d-none"); 36 | }); 37 | } 38 | -------------------------------------------------------------------------------- /pages/components/alert.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Alert Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

159 | Alert 160 |
Avatar
Badge
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Alert

184 |

185 | Alerts can be used to show a message to the user. 186 |

187 | 188 | 189 | 190 |

191 |

Danger Alert

192 | 193 |

194 |

195 |

196 | Hey!👋 I'm a Danger Alert 197 |

198 |

199 | Hey!👋 I'm a Danger Alert 200 |

201 |

202 | 203 |

204 |                     
205 | <div class="alert alert-danger-solid">
206 |   Hey!👋 I'm a Danger Alert
207 | </div>
208 | <div class="alert alert-danger-outline">
209 |   Hey!👋 I'm a Danger Alert
210 | </div>
211 |               
212 |

213 |

214 |

215 | 216 | 217 | 218 | 219 | 220 |

221 |

Info Alert

222 | 223 |

224 |

225 |

Hey!👋 I'm a Info Alert

226 |

227 | Hey!👋 I'm a Info Alert 228 |

229 |

230 | 231 |

232 |                     
233 | <div class="alert alert-info-solid">
234 |   Hey!👋 I'm a Info Alert
235 | </div>
236 | <div class="alert alert-info-outline">
237 |   Hey!👋 I'm a Info Alert
238 | </div>
239 |               
240 |

241 |

242 |

243 | 244 | 245 | 246 | 247 | 248 |

249 |

Primary Alert

250 | 251 |

252 |

253 |

254 | Hey!👋 I'm a Primary Alert 255 |

256 |

257 | Hey!👋 I'm a Primary Alert 258 |

259 |

260 | 261 |

262 |                     
263 | <div class="alert alert-primary-solid">
264 |   Hey!👋 I'm a Primary Alert
265 | </div>
266 | <div class="alert alert-primary-outline">
267 |   Hey!👋 I'm a Primary Alert
268 | </div>
269 |               
270 |

271 |

272 |

273 | 274 | 275 | 276 | 277 | 278 |

279 |

Secondary Alert

280 | 281 |

282 |

283 |

284 | Hey!👋 I'm a Secondary Alert 285 |

286 |

287 | Hey!👋 I'm a Secondary Alert 288 |

289 |

290 | 291 |

292 |                     
293 | <div class="alert alert-secondary-solid">
294 |   Hey!👋 I'm a Secondary Alert
295 | </div>
296 | <div class="alert alert-secondary-outline">
297 |   Hey!👋 I'm a Secondary Alert
298 | </div>
299 |               
300 |

301 |

302 |

303 | 304 | 305 | 306 | 307 | 308 |

309 |

Success Alert

310 | 311 |

312 |

313 |

314 | Hey!👋 I'm a Success Alert 315 |

316 |

317 | Hey!👋 I'm a Success Alert 318 |

319 |

320 | 321 |

322 |                     
323 | <div class="alert alert-success-solid">
324 |   Hey!👋 I'm a Success Alert
325 | </div>
326 | <div class="alert alert-success-outline">
327 |   Hey!👋 I'm a Success Alert
328 | </div>
329 |               
330 |

331 |

332 |

333 | 334 | 335 | 336 | 337 | 338 |

339 |

Warning Alert

340 | 341 |

342 |

343 |

344 | Hey!👋 I'm a Warning Alert 345 |

346 |

347 | Hey!👋 I'm a Warning Alert 348 |

349 |

350 | 351 |

352 |                     
353 | <div class="alert alert-warning-solid">
354 |   Hey!👋 I'm a Warning Alert
355 | </div>
356 | <div class="alert alert-warning-outline">
357 |   Hey!👋 I'm a Warning Alert
358 | </div>
359 |               
360 |

361 |

362 |

363 | 364 | 365 |

366 | 367 | 368 | 369 | 370 | 371 | 384 | 385 | 386 | 387 | 388 | 389 | 401 | 402 | 403 | 404 | 405 | 407 |

408 | 409 | 410 | 411 | 414 | 415 | 416 | -------------------------------------------------------------------------------- /pages/components/avatar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Avatar Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
160 | Avatar 161 |
Badge
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Avatar

184 |

Avatars can be used for user profile picture.

185 | 186 | 187 | 188 |

189 |

Same Sized Avatars

190 | 191 |

192 |

193 |

199 | 200 |

206 | 207 |

213 | 214 |

220 | 221 |

227 |

228 | 229 |

230 |                     
231 | <img loading="lazy" class="avatar" src="..." alt="..." />
232 | <img loading="lazy" class="avatar" src="..." alt="..." />        
233 | <img loading="lazy" class="avatar" src="..." alt="..." />
234 | <img loading="lazy" class="avatar" src="..." alt="..." />
235 | <img loading="lazy" class="avatar" src="..." alt="..." />
236 |               
237 |

238 |

239 |

240 | 241 | 242 | 243 | 244 | 245 |

246 |

Different Sized Avatars

247 | 248 |

249 |

250 |

256 | 257 |

263 | 264 |

270 | 271 |

277 | 278 |

284 |

285 | 286 |

287 |                     
288 | <img loading="lazy" class="avatar avatar-xs" src="..." alt="..." />
289 | <img loading="lazy" class="avatar avatar-sm" src="..." alt="..." />
290 | <img loading="lazy" class="avatar" src="..." alt="..." />
291 | <img loading="lazy" class="avatar avatar-md" src="..." alt="..." />
292 | <img loading="lazy" class="avatar avatar-lg" src="..." alt="..." />
293 |               
294 |

295 |

296 |

297 | 298 | 299 |

300 | 301 | 302 | 303 | 304 | 305 | 314 | 315 | 316 | 317 | 318 | 319 | 331 | 332 | 333 | 334 | 335 | 337 |

338 | 339 | 340 | 341 | 344 | 345 | 346 | -------------------------------------------------------------------------------- /pages/components/badge.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Badge Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
161 | Badge 162 |
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Badge

184 |

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

188 | 189 | 190 | 191 |

192 |

Badge on Icons

193 | 194 |

195 |

196 | 200 | 201 | 205 | 206 | 210 |

211 | 212 |

213 |                     
214 | <button class="badge-btn">
215 |   <i class="fas fa-home"></i>
216 |   <span class="badge-count bg-amber-500">9</span>
217 | </button>
218 | 
219 | <button class="badge-btn">
220 |   <i class="fas fa-shopping-cart"></i>
221 |   <span class="badge-count bg-lime-500">9+</span>
222 | </button>
223 | 
224 | <button class="badge-btn">
225 |   <i class="fas fa-bell"></i>
226 |   <span class="badge-count bg-red-500"> 99+ </span>
227 | </button>            
228 |               
229 |

230 |

231 |

232 | 233 | 234 | 235 | 236 | 237 |

238 |

Badge on Avatars

239 | 240 |

241 |

242 |

243 |

249 | 250 | 251 |

252 | 253 |

254 |

260 | 261 | 262 |

263 | 264 |

265 |

271 | 272 | 273 |

274 |

275 | 276 |

277 |                     
278 | <div class="badge">
279 |   <img loading="lazy" class="avatar" src="..." alt="..." />        
280 |   <span class="badge-status bg-lime-500"></span>
281 | </div>
282 | 
283 | <div class="badge">
284 |   <img loading="lazy" class="avatar" src="..." alt="..." />        
285 |   <span class="badge-status bg-red-500"></span>
286 | </div>
287 | 
288 | <div class="badge">
289 |   <img loading="lazy" class="avatar" src="..." alt="..." />
290 |   <span class="badge-status bg-slate-400"></span>
291 | </div>
292 |               
293 |

294 |

295 |

296 | 297 | 298 |

299 | 300 | 301 | 302 | 303 | 304 | 313 | 314 | 315 | 316 | 317 | 318 | 330 | 331 | 332 | 333 | 334 | 336 |

337 | 338 | 339 | 340 | 343 | 344 | 345 | -------------------------------------------------------------------------------- /pages/components/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Button Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
Badge
162 | Button 163 |
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Button

184 |

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

188 | 189 | 190 | 191 |

192 |

Filled Primary Buttons

193 | 194 |

195 |

196 | 197 | 198 | 199 | 200 | 201 |

202 | 203 |

204 |                     
205 | <button class="btn">Default</button>
206 | <button class="btn btn-error-solid">Error</button>
207 | <button class="btn btn-primary-solid">Primary</button>
208 | <button class="btn btn-secondary-solid">Secondary</button>
209 | <button class="btn btn-success-solid">Success</button>
210 |               
211 |

212 |

213 |

214 | 215 | 216 | 217 | 218 | 219 |

220 |

Outlined Primary Buttons

221 | 222 |

223 |

224 | 225 | 226 | 227 | 228 |

229 | 230 |

231 |                     
232 | <button class="btn btn-error-outline">Error</button>
233 | <button class="btn btn-primary-outline">Primary</button>
234 | <button class="btn btn-secondary-outline">Secondary</button>
235 | <button class="btn btn-success-outline">Success</button>
236 |               
237 |

238 |

239 |

240 | 241 | 242 | 243 | 244 | 245 |

246 |

Link Button

247 | 248 |

249 |

250 | 251 | 252 | 253 | 254 | 258 |

259 | 260 |

261 |                       
262 | <a href="#">
263 |   <button class="btn btn-primary-solid btn-rounded">Link</button>
264 | </a>
265 | <a href="#">
266 |   <button class="btn btn-primary-outline btn-rounded">Link</button>
267 | </a>
268 |                 
269 |

270 |

271 |

272 | 273 | 274 | 275 | 276 | 277 |

278 |

Icon Button

279 | 280 |

281 |

282 | 285 | 288 |

289 | 290 |

291 |                       
292 | <button class="btn btn-error-solid btn-squared">
293 |   <i class="fas fa-door-open"></i> Log In
294 | </button>
295 | <button class="btn btn-error-outline btn-squared">
296 |   <i class="fas fa-door-open"></i> Log In
297 | </button>
298 |                 
299 |

300 |

301 |

302 | 303 | 304 | 305 | 306 | 307 |

308 |

Floating Button

309 | 310 |

311 |

312 | 313 | 316 |

317 | 318 |

319 |                       
320 | <a href="#">
321 |   <button class="btn-floating">
322 |     <i class="fas fa-arrow-up"></i>
323 |   </button>
324 | </a>
325 |                 
326 |

327 |

328 |

329 | 330 | 331 |

332 | 333 | 334 | 335 | 336 | 337 | 349 | 350 | 351 | 352 | 353 | 354 | 366 | 367 | 368 | 369 | 370 | 372 |

373 | 374 | 375 | 376 | 379 | 380 | 381 | -------------------------------------------------------------------------------- /pages/components/image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Image Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
Badge
Button
Card
164 | Image 165 |
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Image

184 |

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

187 | 188 | 189 | 190 |

191 |

Round Image

192 | 193 |

194 |

195 |

201 |

207 |

208 | 209 |

210 |                     
211 | <img loading="lazy" class="img img-round" src="..." alt="..."/>
212 | <img loading="lazy" class="img img-round" src="..." alt="..."/>
213 |               
214 |

215 |

216 |

217 | 218 | 219 | 220 | 221 | 222 |

223 |

Square Image

224 | 225 |

226 |

227 |

233 |

239 |

240 | 241 |

242 |                     
243 | <img loading="lazy" class="img img-square" src="..." alt="..."/>
244 | <img loading="lazy" class="img img-square" src="..." alt="..."/>
245 |               
246 |

247 |

248 |

249 | 250 | 251 | 252 | 253 | 254 |

255 |

Responsive Image

256 |

257 | Resize your browser window, to see its responsiveness. 258 |

259 | 260 |

261 |

262 |

263 | 264 | 265 | stanlee

271 |

272 |

273 | 274 |

275 |                   
276 | <div class="img-container">
277 |   <!-- .img-container {max-width: 52vw;} -->
278 | 
279 |   <img loading="lazy" class="img-responsive" src="..." alt="..."/>
280 | <div>
281 |                 
282 |

283 |

284 |

285 | 286 | 287 |

288 | 289 | 290 | 291 | 292 | 293 | 303 | 304 | 305 | 306 | 307 | 308 | 320 | 321 | 322 | 323 | 324 | 326 |

327 | 328 | 329 | 330 | 333 | 334 | 335 | -------------------------------------------------------------------------------- /pages/components/input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Input Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
Badge
Button
Card
Image
165 | Input 166 |
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Input

184 |

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

188 | 189 | 190 | 191 |

192 |

Text Area

193 | 194 |

195 |

196 |

197 | 201 | 202 | 205 |

206 |

207 | 208 |

209 |                     
210 | <div class="textarea-container">
211 |   <textarea
212 |     class="textarea"
213 |     placeholder="Enter Your Message"
214 |   ></textarea>
215 | 
216 |   <button class="btn btn-primary-solid btn-squared textarea-btn">
217 |     <i class="fas fa-paper-plane"></i> Send
218 |   </button>
219 | </div>
220 |               
221 |

222 |

223 |

224 | 225 | 226 | 227 | 228 | 229 |

230 |

Form Input

231 | 232 |

233 |

234 | 252 |

253 | 254 |

255 |                     
256 | <form class="form">
257 |   <input
258 |     class="input"
259 |     type="email"
260 |     name="email-id"
261 |     placeholder="Enter Your Email"
262 |   />
263 |   <input
264 |     class="input"
265 |     type="password"
266 |     name="password"
267 |     placeholder="Enter Your Password"
268 |   />
269 | 
270 |   <button class="btn btn-error-solid btn-squared">
271 |     <i class="fas fa-door-open"></i> Log In
272 |   </button>
273 | </form>
274 |               
275 |

276 |

277 |

278 | 279 | 280 | 281 | 282 | 283 |

284 |

Error Form Input

285 | 286 |

287 |

288 | 308 |

309 | 310 |

311 |                       
312 | <form class="form">
313 |   <span class="msg-error">Enter correct Email and Password</span>
314 | 
315 |   <input
316 |     class="input input-error"
317 |     type="email"
318 |     name="email-id"
319 |     placeholder="Enter Your Email"
320 |   />
321 |   <input
322 |     class="input input-error"
323 |     type="password"
324 |     name="password"
325 |     placeholder="Enter Your Password"
326 |   />
327 | 
328 |   <button class="btn btn-error-solid btn-squared">
329 |     <i class="fas fa-door-open"></i> Log In
330 |   </button>
331 | </form>
332 |                 
333 |

334 |

335 |

336 | 337 | 338 |

339 | 340 | 341 | 342 | 343 | 344 | 354 | 355 | 356 | 357 | 358 | 359 | 371 | 372 | 373 | 374 | 375 | 377 |

378 | 379 | 380 | 381 | 384 | 385 | 386 | -------------------------------------------------------------------------------- /pages/components/modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Modal Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
Badge
Button
Card
Image
Input
List
167 | Modal 168 |
Navigation
Rating
Slider
Toast
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Modal

184 |

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

187 | 188 | 189 | 190 |

191 | 192 | 193 |

194 |

195 | 210 |

211 | 212 |

213 |                     
214 | <div class="modal">
215 |   <div class="modal-head">Modal Head</div>
216 | 
217 |   <p class="modal-body">
218 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
219 |     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
220 |     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
221 |     aliquip ex ea commodo consequat.
222 |   </p>
223 | 
224 |   <div class="modal-foot">
225 |     <button class="btn btn-primary-outline">Close</button>
226 |     <button class="btn btn-primary-solid">Save Changes</button>
227 |   </div>
228 | </div>
229 |               
230 |

231 |

232 |

233 | 234 | 235 | 236 | 237 | 238 |

239 | 240 | 241 |

242 |

243 | 249 | 250 | 272 |

273 | 274 |

275 |                     
276 | <button
277 |   id="modal-demo-btn"
278 |   class="btn btn-primary-solid btn-squared"
279 | >
280 |   Modal Demo
281 | </button>
282 | 
283 | <div id="modal-container" class="d-none modal-container">
284 |   <div class="mx-auto modal">
285 |     <div class="modal-head">Modal Head</div>
286 | 
287 |     <p class="modal-body">
288 |       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
289 |       do eiusmod tempor incididunt ut labore et dolore magna
290 |       aliqua. Ut enim ad minim veniam, quis nostrud exercitation
291 |       ullamco laboris nisi ut aliquip ex ea commodo consequat.
292 |     </p>
293 | 
294 |     <div class="modal-foot">
295 |       <button
296 |         id="modal-close-btn"
297 |         class="btn btn-primary-outline"
298 |       >
299 |         Close
300 |       </button>
301 |       <button class="btn btn-primary-solid">Save Changes</button>
302 |     </div>
303 |   </div>
304 | </div>  
305 |               
306 |

307 |

308 |

309 | 310 | 311 |

312 | 313 | 314 | 315 | 316 | 317 | 326 | 327 | 328 | 329 | 330 | 331 | 343 | 344 | 345 | 346 | 347 | 349 |

350 | 351 | 352 | 353 | 356 | 357 | 358 | 359 | -------------------------------------------------------------------------------- /pages/components/rating.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Rating Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
Badge
Button
Card
Image
Input
List
Modal
Navigation
169 | Rating 170 |
Slider
Toast
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Rating

184 |

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

188 | 189 | 190 | 191 |

192 |

Filled Rating

193 | 194 |

195 |

196 | ★ 197 | ★ 198 | ★ 199 | ★ 200 | ★ 201 |

202 | 203 |

204 |               
205 | <span class="rating-star filled"> &#9733; </span>
206 | <span class="rating-star filled"> &#9733; </span>
207 | <span class="rating-star filled"> &#9733; </span>
208 | <span class="rating-star"> &#9733; </span>
209 | <span class="rating-star"> &#9733; </span>
210 |               
211 |

212 |

213 |

214 | 215 | 216 | 217 | 218 | 219 |

220 |

Live Rating

221 | 222 |

223 |

224 |

225 | 228 | ★ 229 | 230 | 234 | ★ 235 | 236 | 239 | ★ 240 | 241 | 245 | ★ 246 | 247 | 250 | ★ 251 | 252 | 256 | ★ 257 | 258 | 261 | ★ 262 | 263 | 267 | ★ 268 | 269 | 272 | ★ 273 | 274 |

275 |

276 | 277 |

278 |               
279 | <fieldset class="ratings">
280 |   <input type="radio" name="rating" id="star-5" />
281 |   <label for="star-5">
282 |     &#9733;
283 |   </label>
284 |   <input type="radio" name="rating" id="star-4-n-half" />
285 |   <label for="star-4-n-half" class="half-star">
286 |     &#9733;
287 |   </label>
288 |   <input type="radio" name="rating" id="star-4" />
289 |   <label for="star-4">
290 |     &#9733;
291 |   </label>
292 |   <input type="radio" name="rating" id="star-3-n-half" />
293 |   <label for="star-3-n-half" class="half-star">
294 |     &#9733;
295 |   </label>
296 |   <input type="radio" name="rating" id="star-3" />
297 |   <label for="star-3">
298 |     &#9733;
299 |   </label>
300 |   <input type="radio" name="rating" id="star-2-n-half" />
301 |   <label for="star-2-n-half" class="half-star">
302 |     &#9733;
303 |   </label>
304 |   <input type="radio" name="rating" id="star-2" />
305 |   <label for="star-2">
306 |     &#9733;
307 |   </label>
308 |   <input type="radio" name="rating" id="star-1-n-half" />
309 |   <label for="star-1-n-half" class="half-star">
310 |     &#9733;
311 |   </label>
312 |   <input type="radio" name="rating" id="star-1" />
313 |   <label for="star-1">
314 |     &#9733;
315 |   </label>
316 | </fieldset>
317 |               
318 |

319 |

320 |

321 | 322 | 323 |

324 | 325 | 326 | 327 | 328 | 329 | 338 | 339 | 340 | 341 | 342 | 343 | 355 | 356 | 357 | 358 | 359 | 361 |

362 | 363 | 364 | 365 | 368 | 369 | 370 | -------------------------------------------------------------------------------- /pages/components/slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Slider Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
Badge
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

173 |

174 |

175 | 176 | 177 | 178 | 179 | 180 |

181 |

Slider

182 |

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

185 | 186 |

187 |

Input Slider

188 | 189 |

190 |

191 | 199 |

200 | 201 |

202 |                
203 | <input
204 |   type="range"
205 |   min="1"
206 |   max="5"
207 |   value="2"
208 |   step="0.1"
209 |   class="slider"
210 | />
211 |               
212 |

213 |

214 |

215 |

216 | 217 | 218 | 219 | 220 | 221 | 229 | 230 | 231 | 232 | 233 | 234 | 246 | 247 | 248 | 249 | 250 | 252 |

253 | 254 | 255 | 256 | 259 | 260 | 261 | -------------------------------------------------------------------------------- /pages/components/toast.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Toast Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
Badge
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
171 | Toast 172 |
Tooltip

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Toast

184 |

185 | Toast can be used to show notifications to the user. 186 |

187 | 188 | 189 | 190 |

191 |

Notification Toast

192 | 193 |

194 |

195 |

196 |

197 | Notification from Posh UI 198 | 201 |

202 | 203 |

204 | Hey! Now you can design your project faster and better with 205 | 206 | Posh UI 207 | 208 |

209 |

210 |

211 | 212 |

213 |                     
214 | <div class="toast">
215 |   <div class="toast-head">
216 |     Notification from Posh UI
217 |     <button class="toast-cross">
218 |       <i class="fas fa-times"></i>
219 |     </button>
220 |   </div>
221 | 
222 |   <p class="toast-msg">
223 |     Hey! Now you can design your project faster and better with
224 |     <a class="toast-link" href="https://poshui.netlify.app">
225 |       Posh UI
226 |     </a>
227 |   </p>
228 | </div>
229 |               
230 |

231 |

232 |

233 | 234 | 235 | 236 | 237 | 238 |

239 |

240 | Notification Toast Demo 241 |

242 | 243 |

244 |

245 | 251 | 252 | 267 |

268 | 269 |

270 |                     
271 | <button
272 |   id="notification-toast-demo-btn"
273 |   class="btn btn-primary-solid btn-squared"
274 | >
275 |   Toast Demo
276 | </button>
277 | 
278 | <div id="notification-toast" class="d-none toast toast-fixed">
279 |   <div class="toast-head">
280 |     Notification from Posh UI
281 |     <button id="toast-cross-btn" class="toast-cross">
282 |       <i class="fas fa-times"></i>
283 |     </button>
284 |   </div>
285 | 
286 |   <p class="toast-msg">
287 |     Hey! Now you can design your project faster and better with
288 |     <a class="toast-link" href="https://poshui.netlify.app">
289 |       Posh UI
290 |     </a>
291 |   </p>
292 | </div>
293 |               
294 |

295 |

296 |

297 | 298 | 299 | 300 | 301 | 302 |

303 |

304 | Stacked Notification Toast Demo 305 |

306 | 307 |

308 |

309 | 315 | 316 | 322 | 323 |

325 |
326 |
327 | Notification from Posh UI 328 | 334 |
335 | 336 |
337 | Hey! Now you can design your project faster and better 338 | with 339 | 340 | Posh UI 341 | 342 |
343 |
344 |
347 |
348 |
349 | Notification from Posh UI 350 | 356 |
357 | 358 |
359 | Hey! Now you can design your project faster and better 360 | with 361 | 362 | Posh UI 363 | 364 |
365 |
366 |

368 |

369 | 370 |

371 |                     
372 | <button
373 |   id="first-stacked-toast-btn"
374 |   class="btn btn-primary-solid btn-squared"
375 | >
376 |   First Stacked Toast
377 | </button>
378 | 
379 | <button
380 |   id="second-stacked-toast-btn"
381 |   class="btn btn-primary-solid btn-squared"
382 | >
383 |   Second Stacked Toast
384 | </button>
385 | 
386 | <ul class="toast-fixed">
387 |   <li class="mt-1">
388 |     <div id="stacked-toast-2" class="d-none toast">
389 |       <div class="toast-head">
390 |         Notification from Posh UI
391 |         <button
392 |           id="stacked-toast-2-cross-btn"
393 |           class="toast-cross"
394 |         >
395 |           <i class="fas fa-times"></i>
396 |         </button>
397 |       </div>
398 | 
399 |       <p class="toast-msg">
400 |         Hey! Now you can design your project faster and better
401 |         with
402 |         <a class="toast-link" href="https://poshui.netlify.app">
403 |           Posh UI
404 |         </a>
405 |       </p>
406 |     </div>
407 |   </li>
408 | 
409 |   <li class="mt-1">
410 |     <div id="stacked-toast-1" class="d-none toast">
411 |       <div class="toast-head">
412 |         Notification from Posh UI
413 |         <button
414 |           id="stacked-toast-1-cross-btn"
415 |           class="toast-cross"
416 |         >
417 |           <i class="fas fa-times"></i>
418 |         </button>
419 |       </div>
420 | 
421 |       <p class="toast-msg">
422 |         Hey! Now you can design your project faster and better
423 |         with
424 |         <a class="toast-link" href="https://poshui.netlify.app">
425 |           Posh UI
426 |         </a>
427 |       </p>
428 |     </div>
429 |   </li>
430 | </ul>
431 |               
432 |

433 |

434 |

435 | 436 | 437 |

438 | 439 | 440 | 441 | 442 | 443 | 459 | 460 | 461 | 462 | 463 | 464 | 476 | 477 | 478 | 479 | 480 | 482 |

483 | 484 | 485 | 486 | 489 | 490 | 491 | 492 | -------------------------------------------------------------------------------- /pages/components/tooltip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Tooltip Component 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 91 | 92 | 93 | 94 | 95 | 96 |

97 |

98 | 99 | 100 | 110 | Getting Started 111 | 112 | 113 |

115 | Introduction 116 |
Color
119 | Typography 120 |

122 | 123 | 124 | 125 | 135 | Layout 136 | 137 | 138 |

CSS Grid

141 | 142 | 143 | 144 | 154 | Components 155 | 156 | 157 |

Alert
Avatar
Badge
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
172 | Tooltip 173 |

175 |

176 |

177 | 178 | 179 | 180 | 181 | 182 |

183 |

Tooltip

184 |

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

190 | 191 | 192 | 193 |

194 | 195 | 196 |

197 |

198 | 202 | 203 | 209 |

210 | 211 |

212 |               
213 | <button class="card-icon-btn tooltip">
214 |   <i class="far fa-heart m-auto"></i>
215 |   <span class="tooltip-left tooltip-text">
216 |     add to wishlist
217 |   </span>
218 | </button>
219 | 
220 | <button class="bg-red-50 card-icon-btn tooltip">
221 |   <i class="fas fa-heart m-auto"></i>
222 |   <span class="tooltip-left tooltip-text">
223 |     remove from wishlist
224 |   </span>
225 | </button>
226 |               
227 |

228 |

229 |

230 | 231 | 232 | 233 | 234 | 235 |

236 | 237 | 238 |

239 |

240 | 244 | 245 | 251 |

252 | 253 |

254 |               
255 | <button class="card-icon-btn tooltip">
256 |   <i class="far fa-heart m-auto"></i>
257 |   <span class="tooltip-right tooltip-text">
258 |     add to wishlist
259 |   </span>
260 | </button>
261 | 
262 | <button class="bg-red-50 card-icon-btn tooltip">
263 |   <i class="fas fa-heart m-auto"></i>
264 |   <span class="tooltip-right tooltip-text">
265 |     remove from wishlist
266 |   </span>
267 | </button>
268 |               
269 |

270 |

271 |

272 | 273 | 274 |

275 | 276 | 277 | 278 | 279 | 280 | 289 | 290 | 291 | 292 | 293 | 294 | 301 | 302 | 303 | 304 | 305 | 307 |

308 | 309 | 310 | 311 | 314 | 315 | 316 | -------------------------------------------------------------------------------- /pages/getting-started/introduction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Introduction Getting Started 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 89 | 90 | 91 | 92 | 93 | 94 |

95 |

96 | 97 | 98 | 108 | Getting Started 109 | 110 | 111 |

113 | Introduction 114 |
Color
Typography

118 | 119 | 120 | 121 | 131 | Layout 132 | 133 | 134 |

CSS Grid

137 | 138 | 139 | 140 | 150 | Components 151 | 152 | 153 |

Alert
Avatar
Badge
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

169 |

170 |

171 | 172 | 173 | 174 | 175 | 176 |

177 |

Introduction

178 |

190 | 191 |

192 |

Quick Start

193 | 194 |

195 |

CSS

196 | 197 |

205 | 206 |

207 |

208 |                 
209 | <link
210 |   rel="stylesheet"
211 |   href="https://poshui-components.netlify.app/css/main.css"
212 | />          
213 |                 
214 |

215 |

216 |

217 | 218 |

219 |

JS

220 | 221 |

230 | 231 |

232 |

233 |                 
234 | <script src="https://poshui-components.netlify.app/js/main.js">
235 | </script>          
236 |                 
237 |

238 |

239 |

240 |

241 |

242 | 243 | 244 | 245 | 246 | 247 | 255 | 256 | 257 | 258 | 259 | 260 | 267 | 268 | 269 | 270 | 271 | 273 |

274 | 275 | 276 | 277 | 280 | 281 | 282 | -------------------------------------------------------------------------------- /pages/getting-started/typography.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | Typography Getting Started 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | 56 | 89 | 90 | 91 | 92 | 93 | 94 |

95 |

96 | 97 | 98 | 108 | Getting Started 109 | 110 | 111 |

Introduction
Color
115 | Typography 116 |

118 | 119 | 120 | 121 | 131 | Layout 132 | 133 | 134 |

CSS Grid

137 | 138 | 139 | 140 | 150 | Components 151 | 152 | 153 |

Alert
Avatar
Badge
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

169 |

170 |

171 | 172 | 173 | 174 | 175 | 176 |

177 |

Typography

178 |

179 | Use Typography to format text content on your web site. 180 |

181 | 182 | 183 | 184 |

185 |

Display

186 | 187 |

188 |

189 |

Extra Small Posh UI

190 |

Small Posh UI

191 |

Medium Posh UI

192 |

Large Posh UI

193 |

Extra Large Posh UI

194 |

Extra Extra Large Posh UI

195 |

196 | 197 |

198 |                     
199 | <p class="fs-xs">Extra Small Posh UI</p>
200 | <p class="fs-sm">Small Posh UI</p>
201 | <p class="fs-md">Medium Posh UI</p>
202 | <p class="fs-lg">Large Posh UI</p>
203 | <p class="fs-xl">Extra Large Posh UI</p>
204 | <p class="fs-xxl">Extra Extra Large Posh UI</p>    
205 |               
206 |

207 |

208 |

209 | 210 | 211 | 212 | 213 | 214 |

215 |

Headings

216 | 217 |

218 |

219 |

h6. Posh UI heading

220 |

h5. Posh UI heading

221 |

h4. Posh UI heading

222 |

h3. Posh UI heading

223 |

h2. Posh UI heading

224 |

h1. Posh UI heading

225 |

226 | 227 |

228 |                     
229 | <h6 class="my-0p5">h6. Posh UI heading</h6>
230 | <h5 class="my-0p5">h5. Posh UI heading</h5>
231 | <h4 class="my-0p5">h4. Posh UI heading</h4>
232 | <h3 class="my-0p5">h3. Posh UI heading</h3>
233 | <h2 class="my-0p5">h2. Posh UI heading</h2>
234 | <h1 class="my-0p5">h1. Posh UI heading</h1>
235 |               
236 |

237 |

238 |

239 | 240 | 241 | 242 | 243 | 244 |

245 |

Alignment

246 | 247 |

248 |

249 |

Hey!👋 I am Left Aligned 😀

250 |

Hey!👋 I am Center Aligned 😀

251 |

Hey!👋 I am Right Aligned 😀

252 |

253 | 254 |

255 |                  
256 | <p class="text-left">Hey!👋 I am Left Aligned 😀</p>
257 | <p class="text-center">Hey!👋 I am Center Aligned 😀</p>
258 | <p class="text-right">Hey!👋 I am Right Aligned 😀</p>              
259 |               
260 |

261 |

262 |

263 | 264 | 265 | 266 | 267 | 268 |

269 |

Inline Text Elements

270 | 271 |

272 |

273 | I am the small text😐 274 |

They colored me 😔 in gray

275 |

276 | You can see the text-decoration:overline 277 |

278 |

279 | You can see the text-decoration: line-through 280 |

281 |

282 | You can see the text-decoration: underline 283 |

284 |

285 | 286 |

287 |                  
288 | <small>I am the small text😐</small>
289 | <p class="text-gray-500">They colored me 😔 in gray</p>
290 | <p class="text-overline">
291 |   You can see the <em>text-decoration:overline</em>
292 | </p>
293 | <p class="text-line-through">
294 |   You can see the <em>text-decoration: line-through</em>
295 | </p>
296 | <p class="text-underline">
297 |   You can see the <em>text-decoration: underline</em>
298 | </p>
299 |               
300 |

301 |

302 |

303 | 304 | 305 |

306 | 307 | 308 | 309 | 310 | 311 | 322 | 323 | 324 | 325 | 326 | 327 | 339 | 340 | 341 | 342 | 343 | 345 |

346 | 347 | 348 | 349 | 352 | 353 | 354 | -------------------------------------------------------------------------------- /pages/layout/css-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posh UI | CSS Grid Layout 8 | 9 | 10 | 15 | 21 | 27 | 28 | 29 | 36 | 37 | 38 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |

55 | 56 | 57 | 92 | 93 | 94 | 95 | 96 | 97 |

98 |

99 | 100 | 101 | 111 | Getting Started 112 | 113 | 114 |

116 | Introduction 117 |
Color
120 | Typography 121 |

123 | 124 | 125 | 126 | 136 | Layout 137 | 138 | 139 |

141 | CSS Grid 142 |

144 | 145 | 146 | 147 | 157 | Components 158 | 159 | 160 |

Alert
Avatar
Badge
Button
Card
Image
Input
List
Modal
Navigation
Rating
Slider
Toast
Tooltip

176 |

177 |

178 | 179 | 180 | 181 | 182 | 183 |

184 |

CSS Grid

185 |

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

188 | 189 | 190 | 191 |

192 |

Two Columns Grid

193 | 194 |

195 |

196 |

197 |

Grid Item One

198 |

Grid Item Two

199 |

200 |

201 | 202 |

203 |                     
204 | <div class="grid grid-cols-2">
205 |   <div>Grid Item One</div>
206 |   <div>Grid Item Two</div>
207 | </div>
208 |               
209 |

210 |

211 |

212 | 213 | 214 | 215 | 216 | 217 |

218 |

Two Rows Grid

219 | 220 |

221 |

222 |

223 |

Grid Item One

224 |

Grid Item Two

225 |

226 |

227 | 228 |

229 |                     
230 | <div class="grid grid-rows-2">
231 |   <div>Grid Item One</div>
232 |   <div>Grid Item Two</div>
233 | </div>
234 |               
235 |

236 |

237 |

238 | 239 | 240 | 241 | 242 | 243 |

244 |

Three Columns Grid

245 | 246 |

247 |

248 |

249 |

Grid Item One

250 |

Grid Item Two

251 |

Grid Item Three

252 |

253 |

254 | 255 |

256 |                     
257 | <div class="grid grid-cols-3">
258 |   <div>Grid Item One</div>
259 |   <div>Grid Item Two</div>
260 |   <div>Grid Item Three</div>
261 | </div>
262 |               
263 |

264 |

265 |

266 | 267 | 268 | 269 | 270 | 271 |

272 |

Three Rows Grid

273 | 274 |

275 |

276 |

277 |

Grid Item One

278 |

Grid Item Two

279 |

Grid Item Three

280 |

281 |

282 | 283 |

284 |                     
285 | <div class="grid grid-rows-3">
286 |   <div>Grid Item One</div>
287 |   <div>Grid Item Two</div>
288 |   <div>Grid Item Three</div>
289 | </div>
290 |               
291 |

292 |

293 |

294 | 295 | 296 |

297 | 298 | 299 | 300 | 301 | 302 | 313 | 314 | 315 | 316 | 317 | 318 | 330 | 331 | 332 | 333 | 334 | 336 |

337 | 338 | 339 | 340 | 343 | 344 | 345 | --------------------------------------------------------------------------------