vaspac

Image

Images can be responsive to fit the parent's width, and also can be customised to be round shaped or can be control the transparency of image.

Round Image

The CSS property border-radius adds rounded corners on images. You can round all of the image's corners

round image

Border Image

The CSS property border-radius adds rounded corners on images. You can vary the radius on corners just by adding class .br-10 for 10px border-radius .br-15 for 15px border-radius and .br-5 for 5px border-radius

image 5 radius image 10 radius image 15 radius

Responsive Image

This image generally take the whole width of the parent element you can check it by controlling the size of your screen

responsive image

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent: There are 4 types of value 0.2,0.5,0.8 and 1.

opacity 2 opacity 5 opacity 8 opacity 1

Input

Input use Suppose user want to submit some details by entering data so basically input is that field Where user write whatever data they want to submit.

Textarea Field

Text area field provide user to write story or some details which contain more characters.


Input Field

The input defines a single-line text field. The default width of the text field is 20 characters.

Invalid And Valid

If the data is correct then it shows valid otherwise invalid message to user.

✔ valid email id

❌ Invalid email id

TYPOGRAPHY

Check out below text utilities.

HEADING

heading with simple elements tag and other one is blue colored heading

h1-heading

h2-heading

h3-heading

h4-heading

h5-heading
h6-heading

h1-heading

h2-heading

h3-heading

h4-heading

h5-heading
h6-heading

HEADING CENTER

Example of center heading with primary color shown below

heading center with blue color

SMALL TEXT

Examples of small text with three variations:- grey bold text, small white text and normal small text

hey I'm small text with bold grey text
I'm small bold white text
I'm normal small text

PARAGRAPH

Example of para text with three variations:- normal para , para with spacing and para with line-height and letter spacing .

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam accusantium, voluptatem, neque eos at vero exercitationem illo impedit rem perferendis incidunt animi aliquam adipisci commodi iure esse. Voluptatem iste aperiam animi odit commodi repellendus. Beatae, nesciunt iste illum rerum eos vero numquam est.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptate eveniet tenetur alias eos, iste minima qui voluptatum dolores quidem quam placeat modi sed debitis laudantium, necessitatibus eaque dicta possimus natus enim adipisci sequi iusto aut laboriosam. Quae officiis earum saepe repellendus ducimus!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos deserunt fugiat rerum beatae, voluptates amet facere reiciendis veritatis odit dolore soluta earum itaque officiis, iusto adipisci asperiores possimus sit. Illo.

LIST

Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

Stacked List

This is simple stacked list

Spaced List

This is simple spaced list