Searching for components to Build your own UI
Well your search ends here with UI Recipe . Here almost all the basic Components are provided along with code and information for you to build your own Web Apps/Pages. Happy Learning !!!
- //Getting Started
- Simply add stylesheet link to your project header.
- Start Building !
Avatar
- // small avatar //
- <img class="avatar sm" src="images/avatar.svg">
- // medium avatar //
- <img class="avatar md" src="images/avatar.svg">
- // large avatar //
- <img class="avatar lg" src="images/avatar.svg">
// code //
Text Utilities
In HTML we have formats from h1 to h6 depending on the type of heading.
h1 heading (36px)
h2 heading (30px)
h3 heading (24px)
h4 heading (18px)
h5 heading (14px)
h6 heading (12px)
- <h1>h1 heading (36px)</h1>
- <h2>h2 heading (30px)</h2>
- <h3>h3 heading (24px)</h3>
- <h4>h4 heading (18px)</h4>
- <h5>h5 heading (14px)</h5>
- <h6>h6 heading (12px) </h6>
// code //
Alert
This is an alert.
This is success alert - check it out.
This is warning alert - check it out.
This is error alert - check it out.
- <div class="alert">
- <img class="alert-icon" src="images/info.svg" />This is an alert.
- </div>
- <div class="alert alert-success">
- <img class="alert-icon" src="images/success.svg" />This is success alert - check it out.
- </div>
- <div class="alert alert-warning">
- <img class="alert-icon" src="images/warning.svg" />This is warning alert - check it out.
- </div>
- <div class="alert alert-error">
- <img class="alert-icon" src="images/error.svg" />This is error alert - check it out.
- </div>
// code for alert //
// code for success alert //
// code for warning alert //
// code for error alert //
Badge
- <div class="badge">
- <img class="avatar md" src="images/body-main.svg">
- <span class="status online"> </span>
- </div>
- <div class="badge">
- <img class="avatar md" src="images/body-main.svg">
- <span class="status offline"> </span>
- </div>
- <div class="badge">
- <img class="avatar md" src="images/body-main.svg">
- <span class="status connecting"> </span>
- </div>
< code for online avatar >
< code for offline avatar >
< code for connecting avatar >
Button
- <button class="primary-button">Primary-button</button>
- <button class="sec-button">Second-button</button>
- <button class="light-button">Light-button</button>
- <button class="shop-button">Shop-button</button>
// code //
Card
Flash SaleHurry up and shop now for exclusive discounts on your favourite products.
Vighana HartaHindu god idolsRs 999 Rs 1999 (50% Off)- <div class="card">
- <img class="card-img" src="images/body.svg">
- <div class="card-heading">Flash Sale</div>
- <div class="card-body"> Hurry up and shop now for exclusive discounts on your favourite products.</div>
- <button class="shop-button">Shop</button>
- <button class="close-button">X</button>
- </div>
// code //
Image
- <img class="thumb-img" src="images/body.svg">
// code //
Styled Input
- < input type = "text" class = "style-input" placeholder="Input message">
// code //
Lists
-
We have 3 types of lists :
- Simple List without Bullets
- Stacked List
- Stacked List (spaced)
- Sentence one
- Sentence two
- Sentence three
// Simple List without Bullets//
// Code of Simple List //
- <ul class="simple-list">
- <li> Sentence one </li>
- <li> Sentence two</li>
- <li> Sentence three </li>
- </ul>
- Sentence one
- Sentence two
- Sentence three
// Stacked List//
// Code of Stacked List //
- <ul class="stacked-list">
- <li> Sentence one </li>
- <li> Sentence two</li>
- <li> Sentence three </li>
- </ul>
- Sentence one
- Sentence two
- Sentence three
// Stacked List (spaced) //
// Code of Stacked List (spaced) //
- <ul class="stacked-list list-space">
- <li> Sentence one </li>
- <li> Sentence two</li>
- <li> Sentence three </li>
- </ul>
Modal
Flash SaleHurry up and shop now for exclusive discounts on your favourite products.- <div class="modal">
- <div class="modal-heading">Flash Sale</div>
- <div class="modal-body"> Hurry up and shop now for exclusive discounts on your favourite products.</div>
- <button class="shop-button">Shop</button>
- <button class="close-button">X</button>
- </div>
< code >
Rating
- <div class="rating rating-black">4.5 ★ ★ ★ ★ ★ </div>
- <div class="rating rating-yellow">4.5 ★ ★ ★ ★ ★ </div>
- <div class="rating rating-green">4.5 ★ ★ ★ ★ ★ </div>
// code //
Note: The stars here are represented by farmula &# 9733 without space between # and 9-
Happy to help you !!!♥Designed and Developed by Raman Pidar.