Default Dropdown (Script Required)

System default

Label Checkbox Styled

Custom Checkbox

Unlike default input based checkbox custom checkbox is not input based and doesn't have value. Rather it has aria value "on" and "off". Custom checkbox can be styled and interacted with. Same logic can be be used to create visual switches as well. It starts with default aria-valuetext as "off". Also does not need id nor need to remention id in label for label

Text Input

Date Input

class 'inputdate' on any date type input

Search Bar

Classic

Default styling, no class required, set table attribute, '< table cellspacing=0>...< / table>' for better visual appearance. Hover effect is there by default.

Green Table

Green table color scheme

Blue Table

Blue table color scheme

Classic

Script Required

Default

Use Badges to inform or give stats.

Text Card

Simple card with heading and paragraph

Quote text card

Text card for comments and quotes

Comment Card with avatar

Similar to quote cards with a person's image.

Sharishth Singh

A.I. will only replace people who don't adapt to changes around them.
With A.I. you are now a team of two, if you are not distributing
your work responsibly you may get insecure about being replaced.

Card With Image

Card having some image and description.

The Stars

Photo of stars in clear sky at night.

Default

Image slider

⋖

⋗

Any Slides

Have any div inside (Needs to be enchanced for better UI).

Auto Slide with interval

Default interval between each element is 5 seconds or 5000 ms. make sure to declare in pre script in head simply by declaring constant "CarouselInterval" in millisecond units, it pauses on mouse hover and resumes on mouse out.

Default

Direction Styles

Simple Default

Window Size Responsive

Responsive Nav with Logo

Sticky Navbar

Default

Using List elements

Div Custom

Using Divs

Default

Tab 1 Tab 2 Tab 3

Tab 1 Tab 2 Tab 3

Default

Default

myfunction = (a,b) => {
  console.log(`${a} and ${b}`);
  }

Desktop

Mobile

Default

Styled with provided dropdown

Default

Colored Styled

Default

The <hr> tag

Horizontal Divider

Vertical Divider

Requires script for auto scaling.

Default

x

🏠 Drawer Item 1

🕶 Drawer Item 2

🎃 Drawer Item 3

🏓 Drawer Item 4

🏠 Drawer Item 1

🕶 Drawer Item 2

🎃 Drawer Item 3

🏓 Drawer Item 4

🏠 Drawer Item 1

🕶 Drawer Item 2

🎃 Drawer Item 3

🏓 Drawer Item 4

Open Drawer

Indum dores fini

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim illum unde consequatur incidunt voluptatem voluptatum a, nulla fugiat ipsa numquam, iste tenetur veniam. Iure illum nihil neque nobis recusandae iste?

Mupa Sole engi

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim illum unde consequatur incidunt voluptatem voluptatum a, nulla fugiat ipsa numquam, iste tenetur veniam. Iure illum nihil neque nobis recusandae iste?

Flex - Justify Center Align Center row

Sets items insides container to center of parent both verticaly and horizontaly and item direction is row.
Note: Wrap is enabled for responsiveness depends on screen width less than equal to 768px.

Flex - Justify Center Align Center Column

Sets items inside container to center of parent both verticaly and horizontaly and item direction is column.

Hero Section Simple

Compact code version

Hero Section two row

Hero Section two col

Wraps into two row layout at smaller screen width.

2 column grid

A shorter way.

3 Coulmn grid

Horizontal Column Span

Vertical Row Span

Centering inside a grid item

Justify and align inside a item, with flex in grid method or as I like to refer to it 🙂. Either you can nest a div inside a grid item or just add class 'flex-jc-ac' on exsisting grid item to reduce the code size. Nesting for now with current library is reccommeded.

Justify self Start, Center and End.

You will need to span column for item as well to apply the rule.

Align self Start, Center and End.

You will need to span row for item as well to apply the rule.

Footer template Simple

Link Here Link Here Link Here Link Here Link Here

Link Here Link Here Link Here Link Here Link Here

© Example Release, 2024