Getting Started
Using PopCube-Ui is simple. Just follow the procedure below.
Link the Css file:
Copy the code below in your javascript file.
Alerts
Provide contextual feedback messages for typical user actions!
Examples
You can have any length of text inside them. They also come with an optional dismiss button.
There was an error processing your request
File upload successfull
Account about to expire
You can download multiple images.
USAGE: Just copy the code below and you are good to go !
Avatars
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Examples
You get four sizes to choose from. Also, an optional badge can be included to display if user is online/offline.
USAGE: Just copy the code below and you are good to go !
Badges
Badges can be used for various labelling and other purposes like showing a count.
Examples
You get a total of four badges. The text can be changed to suit your needs.
USAGE: Just copy the code below and you are good to go !
Cards
A card is a flexible content container. It can include headers and footers and various other options.
Examples
These cards are built using flexbox, and hence help you with
responsiveness. They have no margins and no width by default. So
feel free to set your own width and margin to these.
We have also included text only cards. You can customize these
cards with different buttons,box-shadow,outline,badges and close
buttons as per your choice.
Simple Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, amet optio, reiciendis maiores provident a aperiam id architecto, laboriosam quod vitae repellendus voluptates corporis quas. Similique minima veritatis ratione in.
Simple Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, amet optio, reiciendis maiores provident a aperiam id architecto, laboriosam quod vitae repellendus voluptates corporis quas. Similique minima veritatis ratione in.
New
Ether
Pure Cotton polo tshirt
Rs395 Rs799 (50% OFF)
New
A simple heading.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, amet optio, reiciendis maiores provident a aperiam id architecto, laboriosam quod vitae repellendus voluptates corporis quas. Similique minima veritatis ratione in.
Text Overlay
Text Overlay
Text Overlay
Text Overlay
Text Overlay
A simple heading.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, amet optio, reiciendis maiores provident a aperiam id architecto, laboriosam quod vitae repellendus voluptates corporis quas. Similique minima veritatis ratione in.
USAGE: Just copy the code below and you are good to go !
Grids
Grids are extremely helpful in responsive design. Use them to set an overall layout.
Examples
Just add the relevant class name as shown below to get the desired grid type. You can choose between 2x2 and 4x4 grids, and can place any number of elements inside the grid parent.
USAGE: Just copy the code below and you are good to go !
Images
Responsive images change to fit the parent's width. It's height will get changed to keep the aspect-ratio same.
Examples
Just add the relevant class name as shown below to make it responsive. You can also obtain a round image.
USAGE: Just copy the code below and you are good to go !
Inputs
Extend control over your form fields by adding buttons or text on either side of the input element.
Examples
You can choose to have buttons or text on either side of your input field. It can take any text length as desired.
USAGE: Just copy the code below and you are good to go !
Modals
They can be used to add dialogues to your site.
Examples
Modals have "position:fixed" attached to them. They are positioned over everything else in the document. You can close them by clicking on the close buttons. Also you can set your desired width.
Modal title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, nemo voluptatum id reprehenderit amet totam.
USAGE: Just copy the code below and you are good to go !
Toasts
Toasts are simple notifications used to notify the user about various things.
Examples
You can choose from the following three toast types. They come with an optional close button.
USAGE: Just copy the code below and you are good to go !
Typography
Use the various typographic styles to convey relevant meaning. You get options for headings,paragraphs and lists. We also have other headings, the Display headings, which are larger than usual in size. Also, you can get the styles of heading tags, without using the heading tag itself, simply by including the classnames "h1-h6". You can also include an optional hover effect over the lists.
Examples
Use the relevant class names to get the desired style. You can also combine class names. Use classnames as "display-1" (1 to 6 are available) to get larger texts. Lists can also have an optional hover effect using classname "onHover".
Very large text
Paragraph-styled as h1 tag
Paragraph-styled as h2 tag
Paragraph-styled as h3 tag
Paragraph-styled as h4 tag
Paragraph-styled as h5 tag
Paragraph-styled as h6 tag
This is strong text.
This is marked text.
This is italic text.
This is small text.
This is underlined text.
This is a line-through text.
This is centered text
Following are the lists:
- home
- profile
- about
- contact
- home
- profile
- about
- contact
- You have a message!
- Somebody sent an email
- Checkout the latest news
- More information...
USAGE: Just copy the code below and you are good to go !