Card

Unlimited Music

Listen to your favourite artists and albums whenever wherever online and offline

<Code>
<div class="card" style="width:400px">
    <div class="card-body">
        <h4 class="card-title text-indigo">Unlimited Music</h4>
        <p class="card-text">
            Listen to your favourite artists and albums whenever wherever online
            and offline
        </p>
    </div>
    <div class="card-actions">
        <div class="card-buttons">
            <button type="button" class="btn btn-text-indigo">
                Listen Now
            </button>
        </div>
        <div class="card-icons">
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">favorite_border</i>
            </button>
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">share</i>
            </button>
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">more_vert</i>
            </button>
        </div>
    </div>
</div>

Unlimited Music

Listen to your favourite artists and albums whenever wherever online and offline

<Code>
<div class="card card-outline-indigo" style="width:400px">
    <div class="card-body">
        <h4 class="card-title text-indigo">Unlimited Music</h4>
        <p class="card-text">
            Listen to your favourite artists and albums whenever wherever online
            and offline
        </p>
    </div>
    <div class="card-actions">
        <div class="card-buttons">
            <button type="button" class="btn btn-text-indigo">
                Listen Now
            </button>
        </div>
        <div class="card-icons">
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">favorite_border</i>
            </button>
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">share</i>
            </button>
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">more_vert</i>
            </button>
        </div>
    </div>
</div>
Card image

SUV

An SUV is a powerful vehicle with four-wheel drive that can be driven over rough ground. SUV is an abbreviation for 'sport utility vehicle'.

<Code>
<div class="card" style="width: 400px;">
    <img class="card-img-top" src="/assets/images/default.jpg" alt="Card image">
    <div class="card-body">
        <h4 class="card-title">SUV</h4>
        <p class="card-text text-grey-700">
            An SUV is a powerful vehicle with four-wheel drive that can be
            driven over rough ground. SUV is an abbreviation for 'sport utility
            vehicle'.
        </p>
    </div>
    <div class="card-actions">
        <div class="card-buttons">
            <button type="button" class="btn btn-text-indigo">Read</button>
            <button type="button" class="btn btn-text-indigo">Bookmark</button>
        </div>
        <div class="card-icons">
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">favorite_border</i>
            </button>
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">share</i>
            </button>
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">more_vert</i>
            </button>
        </div>
    </div>
</div>
Card image

Butterfly

There is nothing in a caterpillar that tells you it's going to be a butterfly.

<Code>
<div class="card" style="width:400px">
    <img class="card-img-top" src="/assets/images/default.jpg" alt="Card image">
    <div class="card-img-overlay">
        <h4 class="card-title text-white">Butterfly</h4>
        <p class="card-text text-white">
            There is nothing in a caterpillar that tells you it's going to be a butterfly.
        </p>
    </div>
    <div class="card-actions">
        <div class="card-buttons">
            <button type="button" class="btn btn-text-indigo">Read</button>
            <button type="button" class="btn btn-text-indigo">Bookmark</button>
        </div>
        <div class="card-icons">
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">favorite_border</i>
            </button>
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">share</i>
            </button>
            <button type="button"
                    class="btn btn-fab mini-fab btn-light m-1 unelevated">
                <i class="material-icons">more_vert</i>
            </button>
        </div>
    </div>
</div>