Theme Configurator

Header Options
Navbar Options

Thumbnails Components

You can also find thumbnails inside cards.

Basic Thumbnails

With Ripple Colors

<a href="#" class="img-thumbnail withripple">
    <div class="thumbnail-container">
        <img src="..." alt="..." class="img-fluid">
    </div>
</a>

<a href="#" class="img-thumbnail withripple color-light">
    <div class="thumbnail-container">
        <img src="..." alt="..." class="img-fluid">
    </div>
</a>

<a href="#" class="img-thumbnail withripple color-danger">
    <div class="thumbnail-container">
        <img src="..." alt="..." class="img-fluid">
    </div>
</a>

<a href="#" class="img-thumbnail withripple color-warning">
    <div class="thumbnail-container">
        <img src="..." alt="..." class="img-fluid">
    </div>
</a>

<a href="#" class="img-thumbnail withripple color-royal">
    <div class="thumbnail-container">
        <img src="..." alt="..." class="img-fluid">
    </div>
</a>

<a href="#" class="img-thumbnail withripple color-info">
    <div class="thumbnail-container">
        <img src="..." alt="..." class="img-fluid">
    </div>
</a>

<a href="#" class="img-thumbnail withripple color-success">
    <div class="thumbnail-container">
        <img src="..." alt="..." class="img-fluid">
    </div>
</a>

<a href="#" class="img-thumbnail withripple color-dark">
    <div class="thumbnail-container">
        <img src="..." alt="..." class="img-fluid">
    </div>
</a>

Custom content

...

Thumbnail label

Cras justo odio egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati inventore praesentium natus iure nam suscipit exercitationem facere nemo.

...

Thumbnail label

Cras justo odio egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati inventore praesentium natus iure nam suscipit exercitationem facere nemo.

Thumbnails with hover caption

Vertical

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Horizontal

Caption Title

Lorem ipsum dolor sit amet consectetur adipisicing elit.

12 6 5682

Diagonal

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Center

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Top

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Bottom

Caption Title

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Left

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Right

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Warning

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Danger

Caption Title

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Info

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Royal

Caption Title

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Success

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Dark

Caption Title

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Light

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View more

Light

Caption Title

Lorem ipsum dolor sit amet consectetur adipisicing elit.


<h3 class="text-center">Vertical</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail">
        <img src="<%= assets %>/img/demo/port11.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Horizontal</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-horizontal">
        <img src="<%= assets %>/img/demo/port12.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Diagonal</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-diagonal">
        <img src="<%= assets %>/img/demo/port13.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Center</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-center">
        <img src="<%= assets %>/img/demo/port14.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Top</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-top">
        <img src="<%= assets %>/img/demo/port15.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Bottom</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-bottom">
        <img src="<%= assets %>/img/demo/port1.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Left</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-left">
        <img src="<%= assets %>/img/demo/port19.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Right</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-right">
        <img src="<%= assets %>/img/demo/port17.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Warning</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-center ms-thumbnail-warning">
        <img src="<%= assets %>/img/demo/port18.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

<h3 class="text-center">Royal</h3>
<div class="ms-thumbnail-container">
    <figure class="ms-thumbnail ms-thumbnail-center ms-thumbnail-royal">
        <img src="<%= assets %>/img/demo/port18.jpg" alt="" class="img-fluid">
        <figcaption class="ms-thumbnail-caption text-center">
            <div class="ms-thumbnail-caption-content">
                <h3 class="ms-thumbnail-caption-title">...</h3>
                ...
            </div>
        </figcaption>
    </figure>
</div>

...

Material Style

Social Links