Scroll to Top

Basic Components with vast scale-ability is available now with Material Grammi. We have organized the most useful components to work with Material Grammi Projects and with passage of time, these components are being updated by our team. we also prefer on getting feedback from our community. These components are customize-able and extensible with Material Grammi classes and plugins. They are ready to use.

SITEMAP Documentation / Components

Material Grammi provides variety of customize-able navbar and with the various themes. Use links, search, and various components with navbar. It is responsive and extensible.

Demo

use attributes to control the responsive state of elements. attributes: (toggle-button, toggle-target).

Code copy

<div class="navbar navbar-default marginY-20" toggle-button=".navbar-example-1-open" toggle-target=".navbar-example-1-target">
                <a class="brand-name active padX-10 padR-30">Brand</a>
                <div class="navbar-example-1-target">
                    <a class="padR-10">Home</a>
                    <a class="padR-10">About</a>
                    <a class="padR-10">Contact</a>
                </div>
                    
                <a href="#" class="navbar-example-1-open padX-10 padY-5 shadow-dark-1 right-on-s"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>

            </div>

Navbar Colors

You can choose pre-defined looks of navbar from these classes as well as define your own classes to make a new look for navbar.

Navbar Default

Use "navbar-default" class to style the default navbar.

Code copy

<div class="navbar navbar-default marginY-20" toggle-button=".navbar-example-2-open" toggle-target=".navbar-example-2-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-2-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a href="#" class="navbar-example-2-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Navbar Primary

Use "navbar-primary" class to style the blue navbar.

Code copy

<div class="navbar navbar-primary marginY-20" toggle-button=".navbar-example-3-open" toggle-target=".navbar-example-3-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-3-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a href="#" class="navbar-example-3-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Navbar Success

Use "navbar-success" class to style the green navbar.

Code copy

<div class="navbar navbar-success marginY-20" toggle-button=".navbar-example-4-open" toggle-target=".navbar-example-4-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-4-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a class="navbar-example-4-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Navbar Warning

Use "navbar-warning" class to style the amber navbar.

Code copy

<div class="navbar navbar-warning marginY-20" toggle-button=".navbar-example-5-open" toggle-target=".navbar-example-5-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-5-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a class="navbar-example-5-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Navbar Danger

Use "navbar-danger" class to style the red navbar.

Code copy

<div class="navbar navbar-danger marginY-20" toggle-button=".navbar-example-6-open" toggle-target=".navbar-example-6-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-6-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a class="navbar-example-6-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Navbar Special

Use "navbar-special" class to style the teal navbar.

Code copy

<div class="navbar navbar-special marginY-20" toggle-button=".navbar-example-7-open" toggle-target=".navbar-example-7-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-7-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a class="navbar-example-7-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Customize-able footers are available for use. we have followed the rules of Material Design to create the best components and the footer is one of them, You can fully customize the footer the way you want. Just the various organization of classes in order to obtain the classy footer of Material Grammi.

Demo

copyrights reserved
Designed by Egrammi Studios

Code copy

              <div class="row amber6 pad-10">
                    <div class="col m6 l6 s12">
                        copyrights reserved
                    </div>
                    <div class="col m6 l6 s12 text-right">
                        Designed by Egrammi Studios
                    </div>
                </div>

Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content. Use breadcrumbs with or without <li> tag.

Code copy

        <div class="breadcrumb">
            <li><a href="#">page 01</a></li>
            <li><a href="#">page 02</a></li>
            <li><a href="#" class="active">page 03</a></li>
        </div>

Add Thumbnails for zoom in effect on your gallery photos for Good User Experience.

Demo

Code copy

<div class="thumbnail">
    <img src="3.jpg"/>
</div>

Mostly used in e-commerce projects. where you need magnifier glass for your images to increase the use-ability for the user. we have created a simple magnifier effect component for you and this component is very easy to use. On hovering an Image this component will create a magnifier glass and on that glass you can view the scaled part of image where mouse is taken.

Demo

Code copy

<img src="1.jpg" class="img img-responsive eZoom"/>

View box is another zooming component which will zoom the images on click on full screen and after clicking it again it would be zoom out.

Demo

Code copy

<img src="1.jpg" class="img img-responsive view-box"/>

Two types of drop-downs are provided with mateialgrammi. Explore and get what you need.

Multi-Dropdown

Multi dropdown is a component that will generate a menu hidden within the menu

Code copy

<div class="row">
    <div class="col m2">
        <ul class="multidropdown dropdown-primary">
            <li><a href="#">Level 0</a>
                <ul>
                    <li><a href="#">Level 1</a></li>
                    <li><a href="#">Level 1</a></li>
                    <li><a href="#">Level 1</a>
                        <ul>
                           <li><a href="#">Level 2</a>
                               <ul>
                                   <li><a href="#">Level 3</a></li>
                                   <li><a href="#">Level 3</a></li>
                               </ul>
                           </li>
                       </ul>
                   </li>
               </ul>
           </li>
       </ul>
    </div>
</div>

Ink Dropper

Ink dropper can be used as dropdown menu, It can be dropped up, we can also set the position of the dropper by simple classes.

Demo

Code copy

<div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i></a>
                    <div class="menu small small-on-s border-light on-bottom on-left grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>

Drop Position x-Axis

You can set the position of the dropper on x-axis by using classes: "on-left" for left & "on-right" for right. Add these classes to div with menu class.

Code copy

<div class="text-center">
                <div class="dropmenu marginX-20">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i> Left</a>
                    <div class="menu small small-on-s border-light on-bottom on-left grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dropmenu marginX-20">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i> Right</a>
                    <div class="menu small small-on-s border-light on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Drop Position y-Axis

You can set the position of the dropper on y-axis by using classes: "on-top" for top & "on-bottom" for bottom. Add these classes to div with menu class.

Code copy

<div class="text-center">
                <div class="dropmenu marginX-20">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i> Top</a>
                    <div class="menu small small-on-s border-light on-top on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dropmenu marginX-20">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i> Bottom</a>
                    <div class="menu small small-on-s border-light on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Ink Colors

You can also use different color classes with the dropper as well as button. Ink dropper is fully supported by css classes of material grammi as well as user-defined style.

Demo

Code copy

<div class="text-center">
                <div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey3 text-hover-grey1 opensans pad-5 padX-10 grey8"><i class="fas fa-bars"></i></a>
                    <div class="menu small small-on-s on-bottom on-right yellow6 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Menu Sizes

There are three sizes for the Ink Dropper Menu: small, medium and large. you can also use responsive classes for these menu's just add -on-s, -on-m, -on-l in front of menu size classes. eg, small-on-s.

Demo

Code copy

<div class="text-center">
                <div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i></a>
                    <div class="menu medium small-on-s on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Form Elements

Form elements can also be used inside the Ink Dropper Menu.

Demo

Code copy

<div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i></a>
                    <div class="menu medium small-on-s on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <div class="padY-10">
                                    <label for="ink-dropper-form-example">Search</label>
                                    <input type="text" class="Material-form" id="ink-dropper-form-example" label-color="#9E9E9E">
                                </div>
                                <div class="text-right">
                                    <a class="btn btn-info">Search</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Images in Menu

You can use Images in the menu too.

Demo

Code copy

<div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i></a>
                    <div class="menu small small-on-s on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5 text-center">Ink Dropper Image</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <div class="padY-10">
                                    <img src="1.png" class="img img-responsive">
                                </div>
                                <div class="text-right">
                                    <a class="btn btn-dark">About me</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Different examples of cards are given. they are pre-coded for you. But you can also create your own ideas by using these different classes used in these cards. The size of card is decided by the grid system. hence, this is responsive. Just use card class as a container of your content.

Demo

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Code copy

<div class="card grey2">
    <h4 class="text-grey10 bordered-bottom-dark">Title</h4>
    <p class="padY-10 text-grey8"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
    <div class="Links padX-5">
        <a class="btn btn-primary">Link</a>
        <a class="btn btn-primary">Link</a>
        <a class="btn btn-primary">Link</a>
    </div>
</div>

Card Images

We can add images and any content in cards.

Demo

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code copy

<div class="row padY-20">
    <div class="col m4 s12 l4">
        <div class="pad-10">
            <div class="card pad-10 grey3">
                <img src="<?php base(); ?>Assets/img/mglogo.png" class="img img-responsive">
            </div>
        </div>
    </div>
    <div class="col m8 s12 l8">
        <div class="pad-10">
            <div class="card pad-10 padY-15 grey2">
                <h2 class="text-grey8">Title</h2>
                <p class="text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="pad-10">
            <div class="card pad-10 padY-20 grey2">
                <h2 class="text-grey8">Title</h2>
                <p class="text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

Create the notes to notify your users which will get less attention than Alerts but where necessary, they can be added. but you can create it close able by programming j query with the note id.

Alert

Alert Component is designed to have attention.

Demo

× alert info
× alert success
× alert warning
× alert danger

Code copy

        <div class="alert alert-info">
            <span class="closealert">×</span>
            alert info
        </div>

Notifications

Notifications are designed for simple notes or user notifications and we can also implement them on anything.

Demo

info

Some text...

success

Some text...

warning

Some text...

Danger

Some text...

Code copy

<div class="note note-info">
    <strong>info</strong>
    <p>Some text...</p>
</div>

Simple Chat box for your client or bot Chatting Front end.

Demo

Live Chat

How can we help you?

Code copy

<!-- Initialize the button which will open the chatbot -->    
    <a class="btn btn-dark open-chat" data-target="#OpenChatBox">Live Chat</a>
    
    <div class="chatbox exit blue6 text-grey8" id="OpenChatBox" alt-tab=".minimize-btn" close-btn="#close-btn">
        <div class="chat-head borderB-lowdark shadow-dark-1">
            <div class="row pad-10">
                <div class="col m8 l8 s12">
                    <h4><a class="text-hover-white text-grey3 font-10-on-s minimize-btn">Live Chat</a></h4>
                </div>
                <div class="col m4 l4 s12 text-right">
                    <a class="padY-10 padX-5 text-hover-white text-grey3 minimize-btn"><i class="fas fa-minus"></i></a>
                    <a class="padY-10 padX-5 text-hover-white text-grey3" id="close-btn"><i class="fas fa-times"></i></a>
                </div>
            </div>
        </div>
        <div class="chat-body white padY-10 padX-5 borderX-lowdark">
            <div class="row margin-10 pad-10 grey3 text-grey8">
                <div class="col m12 l12 s12">
                    <p class="text-justify">How can we help you?</p>
                </div>
            </div>
        </div>
        <div class="chat-footer borderT-lowdark shadow-dark-1">
            <div class="row padX-10 padY-5">
                <div class="col m9 l9 s12">
                    <input type="text" class="form-control" placeholder="Message">
                </div>
                <div class="col m3 l3 s12">
                    <a class="block text-center padX-10 padT-5 text-hover-white text-grey3">Send <i class="fas fa-caret-right"></i></a>
                </div>
            </div>
        </div>
    </div>

Create Tabs when you want in-page menu and categories are similar and you want to include sub categories to your category. There are two types of tags available in Material Grammi for multi purpose scale-ability, use them where you wish to and how you like to. initially activate the Horizontal tab by adding tab-active class and vtab-active class in vertical tab links.

Horizontal Tabs

Links are shown in horizontal axis.

Demo

Tab Content for First Link

Tab Content for Second Link

Tab Content for Third Link

Code copy

<div class="tab">
    <div class="tablinks">
        <a data-target="#mytab1" class="tab-active">Tab 1</a>
        <a data-target="#mytab2">Tab 2</a>
        <a data-target="#mytab3">Tab 3</a>
    </div>
    <div class="tabcontents">
        <div id="mytab1" class="bluegrey6 text-grey1">Tab Content for First Link</div>
        <div id="mytab2" class="blue6 text-grey1">
            <p>Tab Content for Second Link</p>
        </div>
        <div id="mytab3" class="green6 text-grey1">
            Tab Content for Third Link
        </div>
    </div>
</div>

Vertical Tabs

Links are shown in vertical axis.

Demo

Demo will be available soon.

Code copy

<div class="vtab">
    <div class="vtablinks">
        <a data-target="#mytab1" class="vtab-active">Tab 1</a>
        <a data-target="#mytab2">Tab 2</a>
        <a data-target="#mytab3">Tab 3</a>
    </div>
    <div class="vtabcontents">
        <div id="mytab1" class="bluegrey6 text-white">
            Content of First Tab Link
        </div>
        <div id="mytab2" class="blue6 text-white">
            <p>Content of Second Tab Link</p>
        </div>
        <div id="mytab3" class="green6 text-white">Content of Third Tab Link</div>
    </div>
</div>

Displays collapsible content panels for presenting information in a limited amount of space. Use the backgound colors from defined color library of Material accordion. you can also use the grid system in the accordion-content and much more.

Demo

Section 01

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur

Section 02

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur

Section 03

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur

Code copy

<div class="accordion">
                <a class="accordion-link grey3 pad-10 padX-15 border-lowdark text-grey8 hover-grey5 text-hover-grey10" data-target='#accordion-example-1'>Section 01</a>
                <div class="accordion-content grey4 text-grey8" id="accordion-example-1">
                    <div class="pad-15 pad-20">
                        <div class="row">
                            <div class="col m3 l3 s12">
                                <img src="1.png" class="img img-responsive">
                            </div>
                            <div class="col m9 l9 s12">
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur</p>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <a class="accordion-link active grey3 pad-10 padX-15 borderB-lowdark borderX-lowdark text-grey8 hover-grey5 text-hover-grey10" data-target='#accordion-example-2'>Section 02</a>
                <div class="accordion-content grey4 text-grey8" id="accordion-example-2">
                    <div class="pad-15 pad-20">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur</p>
                    </div>
                </div>
                <a class="accordion-link grey3 pad-10 padX-15 borderB-lowdark borderX-lowdark text-grey8 hover-grey5 text-hover-grey10" data-target='#accordion-example-3'>Section 03</a>
                <div class="accordion-content grey4 text-grey8" id="accordion-example-3">
                    <div class="pad-15 pad-20">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur</p>
                    </div>
                </div>
            </div>

Wizards are very important part of a website when you don't want your user to get tired of filling forms or making another effort along your site while keeping self busy with it. You can temper with the colors, borders etc and add any element in the wizard and add static elements before or after pages. wizard is purely customize-able, use the wizard to introduce your imaginations to the world.

Demo

Wizard Heading

Web development

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Social media marketting

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Web Designs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Graphics

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Web development

Social media marketting

Web Designs

Graphics

Code copy

            <div class="wizard" Total-Pages="4" Page-active="1">
                <div class="row">
                    <div class="col m12 l12 s12 grey1">
                        <div class="pad-10">
                            <h2 class="padB-10 text-grey8">Wizard Heading</h2>
                            <div class="wizard-content" page="1">
                                <h3 class="padB-10 text-grey6">Web development</h3>
                                <p class="padB-20 text-justify text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                            </div>
                            <div class="wizard-content" page="2">
                                <h3 class="padB-10 text-grey6">Social media marketting</h3>
                                <p class="padB-20 text-justify text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                            </div>
                            <div class="wizard-content" page="3">
                                <h3 class="padB-10 text-grey6">Web Designs</h3>
                                <p class="padB-20 text-justify text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                            </div>
                            <div class="wizard-content" page="4">
                                <h3 class="padB-10 text-grey6">Graphics</h3>
                                <p class="padB-20 text-justify text-grey6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                            </div>
                            <a class="wizard-prev pad-5 padX-15 grey8 hover-blue6 text-grey4 text-hover-white"><i class="fas fa-caret-left"></i></a>
                            <a class="wizard-next pad-5 padX-15 grey8 hover-blue6 text-grey4 text-hover-white"><i class="fas fa-caret-right"></i></a>
                        </div>
                    </div>
                    <div class="col m12 l12 s12">
                        <div class="wizard-content" page="1">
                            <div class="row">
                                <div class="col m12 s12 l12">
                                    <h3 class="text-green6 pad-10 padX-20">Web development</h3>
                                </div>
                                <div class="col m12 l12 s12">
                                    <div class="row masonary col-s-1 col-m-4 col-l-4">
                                        <div class="pad-5">
                                            <img src="2.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="3.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="4.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="5.png" class="img img-responsive card margin-10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wizard-content" page="2">
                            <div class="row">
                                <div class="col m12 s12 l12">
                                    <h3 class="text-green6 pad-10 padX-20">Social media marketting</h3>
                                </div>
                                <div class="col m12 l12 s12">
                                    <div class="row masonary col-s-1 col-m-4 col-l-4">
                                        <div class="pad-5">
                                            <img src="1.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="6.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="7.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="8.png" class="img img-responsive card margin-10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wizard-content" page="3">
                            <div class="row">
                                <div class="col m12 s12 l12">
                                    <h3 class="text-green6 pad-10 padX-20">Web Designs</h3>
                                </div>
                                <div class="col m12 l12 s12">
                                    <div class="row masonary col-s-1 col-m-4 col-l-4">
                                        <div class="pad-5">
                                            <img src="10.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="11.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="12.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="13.png" class="img img-responsive card margin-10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wizard-content" page="4">
                            <div class="row">
                                <div class="col m12 s12 l12">
                                    <h3 class="text-green6 pad-10 padX-20">Graphics</h3>
                                </div>
                                <div class="col m12 l12 s12">
                                    <div class="row masonary col-s-1 col-m-4 col-l-4">
                                        <div class="pad-5">
                                            <img src="14.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="15.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="16.png" class="img img-responsive card margin-10">
                                        </div>
                                        <div class="pad-5">
                                            <img src="17.png" class="img img-responsive card margin-10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

use button groups like they have never been used before. we need to group buttons when they belong to similar or important facts of the Project. There are multiple button groups available. use as you wish. These buttons will adjust as your text and have the padding and margin as decided by different helper classes.

Code copy

<div class="btn-group btn-group-primary">
        <a href="#">1</a>
        <a href="#">Primary</a>
        <a href="#">2</a>
    </div>

Manipulate the background of the website of any element.

Demo

Code copy

<img src="1.png" class="background-image"/>

Collapse any element with target click. Use Collapse component to create awesome designs which are responsive and fancy in nature.

Demo

Toggle Details

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Code copy

<a class="collapse btn btn-info" data-target="#collapse-example-1">Toggle Details</a>
<div id="collapse-example-1">
<p class="text-grey6 grey2 text-justify padY-10 pad-40">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

Feedback

Developed By Egrammi Studios