backgroung

DEV UI

HOME

DOCS

Components

Instruction

To use these components in your project, copy the code snippets to the html of your page.

Alert

A Primary alert.
A Secondary alert.
A Success alert.
A Warning alert.
A Danger alert.

                  <div class="alert alert-primary">
                    A Primary alert.
                    <button class="close-btn-alert">
                      <span class="material-icons-outlined">close</span>
                    </button>
                  </div>
                  
                  <div class="alert alert-secondary">
                    A Secondary alert.
                    <button class="close-btn-alert">
                      <span class="material-icons-outlined">close</span>
                    </button>
                  </div>
                  
                  <div class="alert alert-success">
                    <span class="material-icons-outlined">check</span>
                    A Success alert.
                    <button class="close-btn-alert">
                      <i><span class="material-icons-outlined">close</span></i>
                    </button>
                  </div>
                  
                  <div class="alert alert-warning">
                    <span class="material-icons-outlined">error_outline</span>
                    A Warning alert!
                    <button class="close-btn-alert">
                      <i><span class="material-icons-outlined">close</span></i>
                    </button>
                  </div>
                  
                  <div class="alert alert-danger">
                    <span class="material-icons-outlined">warning</span>
                    A Danger alert!!
                    <button class="close-btn-alert">
                      <i><span class="material-icons-outlined">close</span></i>
                    </button>
                  </div>

Avtar

a-1 a-2 a-3 a-4 

            <img class="avatar-biggest" src="https://picsum.photos/1000" />
  
            <img class="avatar-big" src="https://picsum.photos/100" />
              
            <img class="avatar-small" src="https://picsum.photos/10" />
              
            <img class="avatar-smallest" src="https://picsum.photos/1" />

Badge

img home wishlist 

            <div class="avatar-with-badge">
              <img src="https://picsum.photos/50" />
              <div class="badge badge-avatar"></div>
           </div>
                         
           <div class="icon-with-badge">
              <i><span class="material-icons-outlined">shopping_cart</span></i>
              <div class="badge badge-icon">3</div>
           </div>
                         
           <div class="icon-with-badge">
              <i
                ><span
                  class="material-icons-outlined"
                  style="color: rgb(226, 17, 17)"
                  >favorite</span
                ></i
              >
              <div class="badge badge-icon">3</div>
           </div>

Button

            <div>
              <button class="btn-primary">Primary</button>
            </div>
            <div>
              <button class="btn-secondary">Secondary</button>
            </div>
            <div>
              <button class="btn-link-111">
                <a href="">Link</a>
              </button>
            </div>

Card

Title

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

            <div class="card-container">
              <div class="card-with-textOnly">
                <div>
                  <h2>Title</h2>
                  <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                  </p>
                </div>
                <div class="btns">
                  <div>
                    <button class="btn-primary">
                      <strong>Primary</strong>
                    </button>
                  </div>
                  <div>
                    <button class="btn-link-111">
                      <a href="https://google.com"><strong>Link</strong></a>
                    </button>
                  </div>
                </div>
              </div>
            </div>

Horizontal Cards

card-img

Title

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

            <div class="card-horizontal">
              <div><img src="https://picsum.photos/250" /></div>
              <div>
                <div>
                  <h2>Title</h2>
                  <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing
                    elit.
                  </p>
                </div>
                <div class="btns">
                  <div>
                    <button class="btn-primary">
                      <strong>Primary</strong>
                    </button>
                  </div>
                  <div>
                    <button class="btn-link-111">
                      <a href="https://google.com"
                      ><strong>Link</strong></a
                                        >
                    </button>
                  </div>
                </div>
              </div>
            </div>

Image

img-1 img-2 

            <div class="img-div img-rectangle" style="height: auto; width: 100%">
              <img src="https://picsum.photos/500/250" />
            </div>
              
            <div class="img-div img-circle" style="height: auto; width: 50%">
              <img src="https://picsum.photos/250" />
            </div>

List

    Normal List

  • Item 1
  • Item 2
  • Item 3

    Stacked list

  • Item 1
  • Item 2
  • Item 3

            <ul class="list-normal"/>
              <h2/>Normal List</h2/>
              <li/>Item 1</li/>
              <li/>Item 2</li/>
              <li/>Item 3</li/>
            </ul/>
            
            <ul class="list-stacked"/>
              <h2/>Stacked List</h2/>
              <li/>Item 1</li/>
              <li/>Item 2</li/>
              <li/>Item 3</li/>
            </ul/>

Would You like to add this item to your Cart?

            <div class="modal">
              <h3>Would You like to add this item to your Cart?</h3>
              <button class="btn-primary">Cancel</button>
              <button class="btn-link-111">
                <a href="">Add</a>
              </button>
            </div>

Rating

⭐⭐⭐⭐✰

            <div class="rating">
              <input class="stars" type="radio" name="star" /><label for="star1"
                ><svg
                  id="star1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="30px"
                  viewBox="0 -5 576 522"
                ></svg>
                  <path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"
                  /></svg
              ></label>
              <input class="stars" type="radio" name="star" /><label for="star2"
                ><svg
                  id="star2"
                  xmlns="http://www.w3.org/2000/svg"
                  width="30px"
                  viewBox="0 -5 576 522"
                ></svg>
                  <path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"
                  /></svg
              ></label>
              <input class="stars" type="radio" name="star" /><label for="star3"
                ><svg
                  id="star3"
                  xmlns="http://www.w3.org/2000/svg"
                  width="30px"
                  viewBox="0 -5 576 522"
                ></svg>
                  <path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.6>

Toast

Retry in 5 seconds. 

            <div class="alert alert-primary">
              Retry in 5 seconds
              <button class="close-btn-alert">
                  <span class="material-icons-outlined">
                      close
                  </span>
              </button> 
          </div>

Grid

2 grid items

Item-1
Item-2

3 grid items

Item-1
Item-2
Item-3

            <div class="grid-2-items">
              <div>Item 1</div>
              <div>Item 2</div>
            </div>
              
            <div class="grid-3-items">
              <div>Item 1</div>
              <div>Item 2</div>
              <div>Item 3</div>
            </div>

Reach me at

LinkedIn Github Website

© Anupama Pandey.