Theme Configurator

Header Options
Navbar Options

Component Card

Basic Cards

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit facilis, explicabo sunt distinctio vitae quo? Dolores neque cumque, perferendis velit.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero atque voluptatem iure officiis magnam fugit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero atque voluptatem iure officiis magnam fugit.
<div class="card">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Card Title</h3>
    </div>
    <div class="card-body">
        ...
    </div>
</div>

<div class="card">
    <div class="card-body">
        ...
    </div>
    <div class="card-footer">
        Card Footer
    </div>
</div>

Color Cards

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Color Card with headers

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

<div class="card card-light">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-dark">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-primary">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-info">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-royal">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-success">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-warning">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-danger">
    <div class="card-body">
        ...
    </div>
</div>

Color Cards Inverse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Color Card with headers

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit deleniti, amet quib us neque recusandae commodi.

<div class="card card-light-inverse">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-dark-inverse">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-primary-inverse">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-info-inverse">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-royal-inverse">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-success-inverse">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-warning-inverse">
    <div class="card-body">
        ...
    </div>
</div>

<div class="card card-danger-inverse">
    <div class="card-body">
        ...
    </div>
</div>

Card with Icons & Buttons

Just a few examples, the combinations are limitless.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam odio voluptates porro harum ducimus non provident, dolor, modi accusantium rem quis neque labore facilis

Button

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam odio voluptates porro harum ducimus non provident, dolor, modi accusantium rem quis neque labore facilis

Button

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam odio voluptates porro harum ducimus non provident, dolor, modi accusantium rem quis neque labore facilis

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam odio voluptates porro harum ducimus non provident, dolor, modi accusantium rem quis neque labore facilis

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam odio voluptates porro harum ducimus non provident, dolor, modi accusantium rem quis neque labore facilis

Button Other

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam odio voluptates porro harum ducimus non provident, dolor, modi accusantium rem quis neque labore facilis

Button
<div class="card card-info">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-circle ms-icon-xxlg mb-4 color-info"><i class="zmdi zmdi-cloud-outline"></i></span>
        <h4 class="color-info">Lorem ipsum dolor</h4>
        <p>...</p>
        <a href="javascript:void(0)" class="btn btn-raised btn-info"><i class="zmdi zmdi-airplane"></i> Button</a>
    </div>
</div>

<div class="card card-dark-inverse">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-circle ms-icon-xxlg mb-4 color-info"><i class="zmdi zmdi-bike"></i></span>
        <h4 class="color-light">Lorem ipsum dolor</h4>
        <p>...</p>
        <a href="javascript:void(0)" class="btn btn-raised btn-white color-info"><i class="zmdi zmdi-star"></i> Button</a>
    </div>
</div>

<div class="card card-warning-inverse">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-white ms-icon-circle ms-icon-xxlg mb-4"><i class="zmdi zmdi-card-giftcard color-warning"></i></span>
        <h4 class="color-light">Lorem ipsum dolor</h4>
        <p>...</p>
    </div>
</div>

<div class="card card-warning">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-circle ms-icon-xxlg mb-4 color-warning"><i class="zmdi zmdi-cocktail"></i></span>
        <h4 class="color-warning">Lorem ipsum dolor</h4>
        <p>...</p>
    </div>
</div>

<div class="card card-royal">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-round ms-icon-inverse color-royal ms-icon-lg mb-4"><i class="zmdi zmdi-city-alt"></i></span>
        <h4 class="color-royal">Lorem ipsum dolor</h4>
        <p>...</p>
        <a href="javascript:void(0)" class="btn btn-royal"><i class="zmdi zmdi-airplane"></i> Button</a>
        <a href="javascript:void(0)" class="btn btn-royal"><i class="zmdi zmdi-star"></i> Other</a>
    </div>
</div>

<div class="card card-royal-inverse">
    <div class="card-body overflow-hidden text-center">
        <span class="ms-icon ms-icon-white ms-icon-round ms-icon-lg mb-4"><i class="zmdi zmdi-cloud-outline color-royal"></i></span>
        <h4 class="color-light">Lorem ipsum dolor</h4>
        <p>...</p>
        <a href="javascript:void(0)" class="btn btn-white"><i class="zmdi zmdi-airplane"></i> Button</a>
    </div>
</div>

MaterialStyle

Social Links