Welcome to Universe UI

To import type 👇 in HTML File

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

Avatar

An avatar (also known as a profile picture or userpic) is a graphical representation of a user or the user's character or persona. It may take either a two-dimensional form as an icon in Internet forums and other online communities or a three-dimensional form, as in games or virtual worlds.

<img class="avatar" src="https://picsum.photos/200.jpg">

<img class="avatar large" src="https://picsum.photos/200.jpg">

Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

This is an normal alert — check it out!

This is an error alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is an success alert — check it out!

I used Font Awesome Icons in Alerts so make sure you import it before using these.

It you can't find the CDN for font awesome copy this Link in your HTML File

                    <div class="alert">
                        <p> This is an normal alert — check it out!</p>
                    </div>

                    <div class="alert danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        <p> This is an danger alert — check it out!</p>
                    </div>

                    <div class="alert warning">
                        <i class="fas fa-exclamation"></i>
                        <p> This is an warning alert — check it out!</p>
                    </div>

                    <div class="alert info">
                        <i class="fas fa-info"></i>
                        <p> This is an info alert — check it out!</p>
                    </div>

                    <div class="alert success">
                        <i class="fas fa-check-circle"></i>
                        <p> This is an success alert — check it out!</p>
                    </div>

Badge

Badge generates a small badge to the top-right of its child(ren).

I used Font Awesome Icons in Alerts so make sure you import it before using these.

                    <div class="badge-container">
                        <i class="fas fa-reply"></i>
                        <div class="badge"> 10</div>
                    </div>

                    <div class="badge-container">
                        <i class="fas fa-phone-alt"></i>
                        <div class="badge primary"> 19</div>
                    </div>

                    <div class="badge-container">
                        <i class="fas fa-phone-alt"></i>
                        <div class="badge secondary"> 19</div>
                    </div>

                    <div class="badge-container">
                        <i class="fas fa-phone-alt"></i>
                        <div class="badge error"> 19</div>
                    </div>

                    <div class="badge-container">
                        <img class="avatar" src="https://picsum.photos/200.jpg">
                        <div class="badge error avatar-badge"> 19</div>
                    </div>

Buttons

Buttons allow users to take actions, and make choices, with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

Dialogs
Modal windows
Forms
Cards
Toolbars

Contained Button

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

                    <button class="btn">Button</button>
                    <button class="btn primary">Button</button>
                    <button class="btn secondary">Button</button>
                    <button class="btn link">Button</button>

Text Button

Text buttons are typically used for less-pronounced actions, including those located in dialogs, cards. In cards, text buttons help maintain an emphasis on card content.

                    <button class="btn text">Button</button>
                    <button class="btn primary text">Button</button>
                    <button class="btn secondary text">Button</button>
                    <button class="btn link text">Button</button>

Outlined Button

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.

                    <button class="btn outline">Button</button>
                    <button class="btn primary outline">Button</button>
                    <button class="btn secondary outline">Button</button>
                    <button class="btn link outline">Button</button>

Floating Action Button

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim tempora dolor aut molestias a sint eius in id consequatur. Ratione molestiae animi cumque voluptate, iste aut perspiciatis enim ab modi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae odit rem, quas unde cum alias, ad corrupti nemo ullam ut in. Porro id eos quidem quaerat in vitae, praesentium eligendi!

                    <div class="floating-btn-container">
                        <button class="floating-btn">
                        +
                        </button>
                        <p>Loremidem quaerat in vitae, praesentium eligendi</p>
                    </div>

Cards

New

Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam harum nihil molestias excepturi, quasi corporis quae deleniti voluptatibus architecto est tempora. Mollitia nisi accusamus, a voluptas maiores consectetur molestiae beatae.

Heading

Sub Heading

                    <div class="card">
                        <div class="thumbnail">
                            <i class="fas fa-badge"></i>
                            <p class="badge-text">New</p>
                            <img src="https://cesarkaikarate.com/wp-content/uploads/2017/04/default-image.jpg">
                            <button class="close">X</button>
                        </div>
                        <h2>Heading</h2>
                        <p>Lorem ipsum doolestiae beatae.</p>
                        <button class="btn primary">CTA</button>
                    </div>

                    <div class="card text shadow">
                        <h2>Heading</h2>
                        <h3>Sub Heading</h3>
                        <p>Lorem iores consectetur molestiae beatae.</p>
                        <button class="btn primary link text">Read More...</button>
                    </div>

Heading

Sub Heading

                    <div class="card text shadow horizontal">
                        <h2>Heading</h2>
                        <h3>Sub Heading</h3>
                        <p>Lorem ipsnsectetur molestiae beatae.</p>
                        <div class="links">
                            <button class="btn primary text">Read More...</button>
                            <button class="btn secondary text">Share Now</button>
                        </div>
                    </div>

For Card Shadow : use class="card shadow"
For Horizontal Card : use class="card horizontal"

Images

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

                    <div class="image-container">
                        <img class="reponsive-img" src="IMAGE_URL">
                    </div>

Circular Images

Make Prefectly Circular Images.

                    <img class="circle-img" src="IMAGE_URL">

Input

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

@example.com

Your Vanity URL

https://example.com/users/

₹ .00

With Textarea

                    <div>
                        <div class="input-container">
                            <span>@</span>
                            <input placeholder="Username" aria-label="Username">
                        </div>
                        <div class="input-container">
                            <input placeholder="Recipient's username" 
                            aria-label="Recipient's username">
                            <span>@example.com</span>
                        </div>
                        <p class="component">Your Vanity URL</p>
                        <div class="input-container">
                            <span>https://example.com/users/</span>
                            <input placeholder="" >
                        </div>
                        <div class="input-container">
                            <span>₹</span>
                            <input placeholder="" 
                            aria-label="Amount (to the nearest rupee)">
                            <span>.00</span>
                        </div>
                        <div class="input-container">
                            <span>With Textarea</span>
                            <textarea placeholder="" aria-label="With textarea"></textarea>
                        </div>
                    </div>

Lists

Sent Mail
Draft
Inbox
Trash

                        <ul class="list">
                            <li><i class="far fa-envelope-open-text"></i>Sent Mail</li>
                            <li><i class="fab fa-firstdraft"></i>Draft</li>
                            <li><i class="fas fa-inbox"></i>Inbox</li>
                            <li><i class="fas fa-trash"></i>Trash</li>
                        </ul>

Heading

Sub Heading

Lorem ipsnsectetur molestiae beatae.
Heading

Sub Heading

Lorem ipsnsectetur molestiae beatae.
Heading

Sub Heading

Lorem ipsnsectetur molestiae beatae.
Heading

Sub Heading

Lorem ipsnsectetur molestiae beatae.

                        <ul class="list">
                            <li>
                                <div class="card text shadow horizontal">
                                    <h2>Heading</h2>
                                    <h3>Sub Heading</h3>
                                    <p>Lorem ipsnsectetur molestiae beatae. </p>
                                    <div class="links">
                                        <button class="btn primary text">Read More...</button>
                                        <button class="btn secondary text">Share Now</button>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="card text shadow horizontal">
                                    <h2>Heading</h2>
                                    <h3>Sub Heading</h3>
                                    <p>Lorem ipsnsectetur molestiae beatae. </p>
                                    <div class="links">
                                        <button class="btn primary text">Read More...</button>
                                        <button class="btn secondary text">Share Now</button>
                                    </div>
                                </div>
                            </li>
                        </ul>

Navigation Bar

The top App Bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. It can transform into a contextual action bar or be used as a navbar.

                    <div class="navigation">
                        <a href="https://universeui.netlify.app/">
                        <img src="./assets/Logo/icon-black.png" ></a>
                        <ul>
                            <li><a href="/">Home</a></li>
                            <li><a href="/">Contact</a></li>
                            <li><a href="/">Documentation</a></li>
                            <li><a href="/">About</a></li>
                        </ul>
                    </div>

Modal

                    <div class="modal-container">
                        <div class="modal-top">
                            <h3>Modal title</h3>
                            <button class="btn">X</button>
                        </div>
                        <hr>
                        <div class="modal-middle">
                            <p>Woohoo, you're reading this text in a modal!</p>
                        </div>
                        <hr>
                        <div class="modal-bottom">
                            <button class="btn secondary outline">Close</button>
                            <button class="btn primary">Save Changes</button>
                        </div>
                    </div>

Rating

                    <div class="rating">
                        <i class="fa fa-star checked" aria-hidden="true"></i>
                        <i class="fa fa-star checked" aria-hidden="true"></i>
                        <i class="fa fa-star checked" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                      </div>

Slider

Later

Simpified Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum explicabo deleniti quo numquam culpa dolores fugiat modi. Vitae quaerat optio dolor, quos consequuntur qui, magnam assumenda perspiciatis excepturi saepe deserunt!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis, repellat ea. Ad, nihil exercitationem. Velit illo unde asperiores. Sapiente in perspiciatis cumque exercitationem quaerat ipsam consequuntur tempore quae at laboriosam.

                    <div class="grid-2">
                        <div><p>Lorem erspii saepe deserunt!</p></div>
                        <div><p>Lorem iquae at laboriosam.</p></div>
                    </div>

                    <div class="grid-3">
                        <div><p>Lorem erspii saepe deserunt!</p></div>
                        <div><p>Lorem iquae at laboriosam.</p></div>
                        <div><p>Lorem erspii saepe deserunt!</p></div>
                    </div>

Text Utilities

Heading

                    <p class="text-heading">Heading</p>
                    <p class="text-heading2">Heading</p>
                    <p class="text-small">Heading</p>
                    <p class="grey-text">Heading</p>
                    <p class="center-text">Heading</p>

Toast

Heading

11 mins ago

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus ipsum voluptates ad nam ab! Ipsum, quidem animi explicabo sint aliquid quaerat possimus odio, molestias nulla assumenda sunt officiis harum atque.

                        <div class="toast">
                            <div class="toast-top">
                                <p class="text-heading">Heading</p>
                                <div>
                                    <p class="text-small grey-text">11 mins ago</p>
                                    <button class="btn outline">X</button>
                                </div>
                            </div>
                            <div class="toast-bottom">
                                <p>Lorem ipsumenda sunt officiis harum atque.</p>
                            </div>
                        </div>

Welcome to Universe UI

Avatar

Alert

Badge

Buttons

Contained Button

Text Button

Outlined Button

Floating Action Button

Cards

Heading

Heading

Sub Heading

Heading

Sub Heading

For Card Shadow : use class="card shadow" For Horizontal Card : use class="card horizontal"

Images

Responsive Images

Circular Images

Input

Lists

Heading

Sub Heading

Heading

Sub Heading

Heading

Sub Heading

Heading

Sub Heading

Navigation Bar

Modal

Modal title

Rating

Slider

Simpified Grid

Text Utilities

Toast

Let's Connect Over

For Card Shadow : use class="card shadow"
For Horizontal Card : use class="card horizontal"