Cards

A card displays site content in a manner similar to a playing card

Standard Cards

Sea Monster

Coworker

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

Read More Create in Sep 2014

Dragon Charctar

Flat Artwork

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

Read More Create in Sep 2015

Forest Monster

Artwork

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

Read More Create in Sep 2016

Space Rocket

subtitle

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

Read More Create in Sep 2014 
<div class="row cards-wraper">
    <!-- Standard Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="image"> 
                <img src="images/img.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <h5 class="sub-title">Coworker</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-send more">Read More</span>
                <span class="right"> Create in Sep 2014 </span>
            </div>
        </div>
    </div>
    <!-- // Standard Card -->

    <!-- Standard Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="image"> 
                <img src="images/img2.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Dragon Charctar</h3>
                <h5 class="sub-title">Flat Artwork</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-send more">Read More</span>
                <span class="right"> Create in Sep 2015 </span>
            </div>
        </div>
    </div>
    <!-- // Standard Card -->

    <!-- Standard Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="image"> 
                <img src="images/img3.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Forest Monster</h3>
                <h5 class="sub-title">Artwork</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-send more">Read More</span>
                <span class="right"> Create in Sep 2016 </span>
            </div>
        </div>
    </div>
    <!-- // Standard Card -->

    <!-- Standard Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="image"> 
                <img src="images/img4.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Space Rocket</h3>
                <h5 class="sub-title">subtitle</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-send more">Read More</span>
                <span class="right"> Create in Sep 2014 </span>
            </div>
        </div>
    </div>
    <!-- // Standard Card -->
</div>

Horizontal Cards

Sea Monster

Coworker

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

Read More Create in Sep 2015

Dragon Charctar

Flat Artwork

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

Read More Create in Sep 2015 
<div class="row cards-wraper">
    <!-- Horizontal Card -->
    <div class="col-s-12 col-m-6">
        <div class="card horizontal">
            <div class="image"> 
                <img src="images/img.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <h5 class="sub-title">Coworker</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                <div class="card-footer">
                    <span class="ti-send more">Read More</span>
                    <span class="right"> Create in Sep 2014 </span>
                </div>
            </div>
        </div>
    </div>
    <!-- // Horizontal Card -->

    <!-- Horizontal Card -->
    <div class="col-s-12 col-m-6">
        <div class="card horizontal">
            <div class="image"> 
                <img src="images/img2.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Dragon Charctar</h3>
                <h5 class="sub-title">Flat Artwork</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                <div class="card-footer">
                    <span class="ti-send more">Read More</span>
                    <span class="right"> Create in Sep 2014 </span>
                </div>
            </div>
        </div>
    </div>
    <!-- // Horizontal Card -->
</div>

Card With User navbar

Eng.Abdallah 14h ago

Sea Monster

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

5652 Comment 5132 Likes
Eng.Abdallah 14h ago

Sea Monster

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

5652 Comment 5132 Likes
Eng.Abdallah 14h ago

Sea Monster

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

5652 Comment 5132 Likes
Eng.Abdallah 14h ago

Sea Monster

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

5652 Comment 5132 Likes 
<div class="row cards-wraper">
    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="image"> 
                <img src="images/img.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="image"> 
                <img src="images/img2.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="image"> 
                <img src="images/img3.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="image"> 
                <img src="images/img4.png" alt="">
            </div>
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->
</div>

Card Without Content

Eng.Abdallah 14h ago
5652 Comment 5132 Likes
Eng.Abdallah 14h ago
5652 Comment 5132 Likes
Eng.Abdallah 14h ago
5652 Comment 5132 Likes
Eng.Abdallah 14h ago
5652 Comment 5132 Likes 
<div class="row cards-wraper">
    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="image"> 
                <img src="images/img.png" alt="">
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="image"> 
                <img src="images/img2.png" alt="">
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="image"> 
                <img src="images/img3.png" alt="">
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="image"> 
                <img src="images/img4.png" alt="">
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->
</div>

Card without Image

Sea Monster

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

5652 Comment 5132 Likes
Eng.Abdallah 14h ago

Sea Monster

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

5652 Comment 5132 Likes

Sea Monster

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

5652 Comment 5132 Likes
Eng.Abdallah 14h ago

Sea Monster

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

5652 Comment 5132 Likes 
<div class="row cards-wraper">
    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->

    <!-- Card -->
    <div class="col-s-12 col-m-4 col-l-3">
        <div class="card">
            <div class="user-nav">
                <img src="images/img.png" width="30" height="30" alt="" class="rounded">
                <span class="username">Eng.Abdallah</span>
                <span class="right">14h ago</span>
            </div>
            <div class="card-content">
                <h3 class="title">Sea Monster</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>
            <div class="card-footer">
                <span class="ti-comment more">5652 Comment</span>
                <span class="right ti-thumb-up"> 5132 Likes </span>
            </div>
        </div>
    </div>
    <!-- // Card -->
</div>