Scroll to Top

Cards

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.

SITEMAP Documentation / Components / 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.

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>

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>

Feedback