Installation

In order to introduce OXY Elements into your project, you just need to copy and paste the below link in the <head> tag of your html page, above all other style sheets. That's it now you are ready to build.

Colors

Below is the color palette, used by OXY Elements with their rgb-codes.

Primary rgb(145, 55, 135)
Secondary rgb(0,0,0)
Success rgb(50, 200, 50)
Warning rgb(255, 180, 0)
Danger rgb(215, 50, 50)

Typography

Below are the text utilities

Heading

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
Paragraph text

Paragraph with regular font size

Paragraph with extra large font

Paragraph with large font

Paragraph with small font

Font weight

Paragraph with thin large weight

Paragraph with light font weight

Paragraph with normal font weight

Paragraph with medium font weight

Paragraph with semibold font weight

Paragraph with bold font weight

Avatar

Avatar can be used to show user's profile picture on profile information page or on navigation bar.

avatar avatar avatar avatar avatar avatar

Alert

Alerts are used to attract user's attention for important information without interrupting the user's flow.

Alert simple
success icon Success Alert !
success icon Warning Alert !
success icon Danger Alert !
Alert outline
success icon Success Alert !
success icon Warning Alert !
success icon Danger Alert !

Badge

Badges are being used to display a notification count or status information.

avatar small
avatar small
avatar small
avatar small
avatar small
avatar small
9

Button

Buttons are also known as call to action (CTA). Buttons allow users to take actions, and make choices, with a single tap. We have range of buttons from solid to icon only buttons.

Solid button
Oultline button
Icon button
Link, icon-only & floating action button

Card

Card are used to show user related data collectively, like product details.

Text only card
Hip-hop Intro

Hip hop or hip-hop is a culture and art movement that was created by African Americans, Latino Americans and Caribbean Americans in the Bronx, New York City. The origin of the name is often disputed. It is also argued as to whether hip hop started in the South or West Bronx.

Card with dismiss
Hip-hop Intro

Hip hop or hip-hop is a culture and art movement that was created by African Americans, Latino Americans and Caribbean Americans in the Bronx, New York City. The origin of the name is often disputed. It is also argued as to whether hip hop started in the South or West Bronx.

Vertical card
card img
Our Changing Planet
by Kurt Wagner

Our planet is undergoing the biggest changes today.

Eminem Recovery T-shirt
₹ 1499
Horizontal card
Eminem Recovery T-shirt

100% Cotton Machine wash warm, inside out with like colors, only use non-chlorine bleach, tumble dry low, do not iron decoration

₹ 1499
Eminem Recovery T-shirt

100% Cotton Machine wash warm, inside out with like colors, only use non-chlorine bleach, tumble dry low, do not iron decoration

₹ 1499
₹ 2999
₹50% off
Card with badge
discount icon
Eminem Recovery T-shirt
₹ 1499
₹ 2999
discount icon
Eminem Recovery T-shirt

100% Cotton Machine wash warm, inside out with like colors, only use non-chlorine bleach, tumble dry low, do not iron decoration

₹ 1499
₹ 2999
₹50% off
Card with overlay
Eminem Recovery T-shirt
₹ 1499
sold out img
Card with shadow
Eminem Recovery T-shirt
₹ 1499

Image

Images can be responsive to fit the parent's width, and also can be customised to be round or square shaped.

Round image
image image image
Square image
image image image
Responsive image
image

Input

Inputs are used to take information from the user, and then save the data to the server, accordingly.

Text input
Text input with validation
Radio input
Rating
Checkbox input
Category
Simple slider

Form

Forms are used to collect user data. SignUp and SignIn forms are listed below.

SignIn form
LOGIN

Please enter your email and password.

Not a user yet?

Sign Up
SignUp form
SIGNUP

Please fill in your information below.

Already a user?

Sign In

List

Lists as they indicate themselves, are used to display list of similar items. We have provided a number of options in lists to choose from.

Unordered list
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
Ordered list
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
Stacked list

  • new follower

    @user just followed you

  • new follower

    @user just followed you

  • new follower

    @user just followed you

Rating

Ratings are visual representation of user satisfaction of any product.

4.2 | 5
8 | 10

Text Utilities

We have provided a number of options in the text utilities to choose from.

Text alignment
This text is left aligned
This text is center aligned
This text is right aligned
Some other styles
This is striked text
Text in grey color
Text in primary color
Text in primary color

Toast

Toast is mostly used to show feedback message.

Can't send photo. Retry in 5 seconds.
Downloaded
Downloading

Simplified Grid

Use grid when you want sections in view. We have provided 2 column and 3 column layouts.

Side by side 50:50 layout
image image
Side by side 30:70 layout
image image
Side by side 70:30 layout
image image
3 column layout
image image image