MDC Templates

Media Sample

Media heading

Fusce sit amet dui mauris. Integer rhoncus ipsum ultricies nisi fringilla eleifend. Etiam a neque a ipsum fermentum tincidunt non nec augue. Maecenas convallis vitae neque porta vulputate. Suspendisse placerat nec leo sit amet feugiat. Duis massa odio, semper at nisi vitae, bibendum luctus arcu. Aliquam at eros mollis, egestas justo at, tincidunt ante.

Media heading

Fusce sit amet dui mauris. Integer rhoncus ipsum ultricies nisi fringilla eleifend. Etiam a neque a ipsum fermentum tincidunt non nec augue. Maecenas convallis vitae neque porta vulputate. Suspendisse placerat nec leo sit amet feugiat. Duis massa odio, semper at nisi vitae, bibendum luctus arcu. Aliquam at eros mollis, egestas justo at, tincidunt ante.

Copy

<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object" src="http://placehold.it/165x110" alt="">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading"><a href="#">Media heading</a></h4>
        <p>Fusce sit amet dui mauris. Integer rhoncus ipsum ultricies nisi fringilla eleifend. Etiam a neque a ipsum fermentum tincidunt non nec augue. Maecenas convallis vitae neque porta vulputate. Suspendisse placerat nec leo sit amet feugiat. Duis massa odio, semper at nisi vitae, bibendum luctus arcu. Aliquam at eros mollis, egestas justo at, tincidunt ante.</p>
    </div>
</div>
<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object" src="http://placehold.it/165x110" alt="">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading"><a href="#">Media heading</a></h4>
        <p>Fusce sit amet dui mauris. Integer rhoncus ipsum ultricies nisi fringilla eleifend. Etiam a neque a ipsum fermentum tincidunt non nec augue. Maecenas convallis vitae neque porta vulputate. Suspendisse placerat nec leo sit amet feugiat. Duis massa odio, semper at nisi vitae, bibendum luctus arcu. Aliquam at eros mollis, egestas justo at, tincidunt ante.</p>
    </div>
</div>

Copy

<ul class="media-list">
    <li class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object" src="http://placehold.it/165x110" alt="">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading"><a href="#">Media heading</a></h4>
            <p>Fusce sit amet dui mauris. Integer rhoncus ipsum ultricies nisi fringilla eleifend. Etiam a neque a ipsum fermentum tincidunt non nec augue. Maecenas convallis vitae neque porta vulputate. Suspendisse placerat nec leo sit amet feugiat. Duis massa odio, semper at nisi vitae, bibendum luctus arcu. Aliquam at eros mollis, egestas justo at, tincidunt ante.</p>
        </div>
    </li>
    <li class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object" src="http://placehold.it/165x110" alt="">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading"><a href="#">Media heading</a></h4>
            <p>Fusce sit amet dui mauris. Integer rhoncus ipsum ultricies nisi fringilla eleifend. Etiam a neque a ipsum fermentum tincidunt non nec augue. Maecenas convallis vitae neque porta vulputate. Suspendisse placerat nec leo sit amet feugiat. Duis massa odio, semper at nisi vitae, bibendum luctus arcu. Aliquam at eros mollis, egestas justo at, tincidunt ante.</p>
        </div>
    </li>
</ul>

Copy

<ul class="list-unstyled">
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Morbi leo risus</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
</ul>

Copy

<ul class="list-unstyled list-divider">
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Morbi leo risus</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
</ul>