Blog Example

<div class="row justify-content-center">
    <div class="col col-md-4">
        <!-- Post preview (Grid) with image -->
        <h3>
            Image top
        </h3>
        <article class="card card-hover">

            <a class="card-img-top" href="#">
                <img src="https://via.placeholder.com/200x400" style="max-height: 300px !important;" alt="Post thumbnail" />
            </a>
            <div class="card-body">
                <a class="meta-link fs-sm mb-2" href="#">Digital design</a>
                <h2 class="h5 nav-heading mb-4">
                    <a href="#">Designers should always keep their users in mind</a>
                </h2>
                <a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
                    <img class="rounded-circle" width="36" src="https://via.placeholder.com/150/FFFF00/000000 ?Text=Digital.com" alt="Emma Brown" />
                    <div class="ps-2 ms-1 mt-n1">
                        by
                        <span class="fw-semibold ms-1">Emma Brown</span>
                    </div>
                </a>
                <div class="mt-3 text-end text-nowrap">
                    <a class="meta-link fs-xs" href="#">
                        <i class="ai-message-square me-1"></i>
                        &nbsp;6
                    </a>
                    <span class="meta-divider"></span>
                    <a class="meta-link fs-xs" href="#">
                        <i class="ai-calendar me-1 mt-n1"></i>
                        &nbsp;Feb 19
                    </a>
                </div>
            </div>
        </article>
    </div>
    <div class="col col-md-4">
        <!-- Post preview (Grid) with image -->
        <h3>
            Image horizontal
            (left)
        </h3>
        <article class="card card-horizontal card-hover">

            <a class="card-img-top" href="#">
                <img src="https://via.placeholder.com/200x400" style="max-height: 300px !important;" alt="Post thumbnail" />
            </a>
            <div class="card-body">
                <a class="meta-link fs-sm mb-2" href="#">secondary</a>
                <h2 class="h5 nav-heading mb-4">
                    <a href="#">Designers should always keep their users in mind</a>
                </h2>
                <a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
                    <img class="rounded-circle" width="36" src="https://via.placeholder.com/150/FFFF00/000000 ?Text=Digital.com" alt="Emma Brown" />
                    <div class="ps-2 ms-1 mt-n1">
                        by
                        <span class="fw-semibold ms-1">Emma Brown</span>
                    </div>
                </a>
                <div class="mt-3 text-end text-nowrap">
                    <a class="meta-link fs-xs" href="#">
                        <i class="ai-message-square me-1"></i>
                        &nbsp;6
                    </a>
                    <span class="meta-divider"></span>
                    <a class="meta-link fs-xs" href="#">
                        <i class="ai-calendar me-1 mt-n1"></i>
                        &nbsp;Feb 19
                    </a>
                </div>
            </div>
        </article>
    </div>
    <div class="col col-md-4">
        <!-- Post preview (Grid) with image -->
        <h3>
            Image horizontal
            (Right)
        </h3>
        <article class="card card-horizontal card-hover">

            <a class="card-img-top order-sm-2" href="#">
                <img src="https://via.placeholder.com/200x400" style="max-height: 300px !important;" alt="Post thumbnail" />
            </a>
            <div class="card-body">
                <a class="meta-link fs-sm mb-2" href="#">travel</a>
                <h2 class="h5 nav-heading mb-4">
                    <a href="#">Designers should always keep their users in mind</a>
                </h2>
                <a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
                    <img class="rounded-circle" width="36" src="https://via.placeholder.com/150/FFFF00/000000 ?Text=Digital.com" alt="Emma Brown" />
                    <div class="ps-2 ms-1 mt-n1">
                        by
                        <span class="fw-semibold ms-1">Emma Brown</span>
                    </div>
                </a>
                <div class="mt-3 text-end text-nowrap">
                    <a class="meta-link fs-xs" href="#">
                        <i class="ai-message-square me-1"></i>
                        &nbsp;6
                    </a>
                    <span class="meta-divider"></span>
                    <a class="meta-link fs-xs" href="#">
                        <i class="ai-calendar me-1 mt-n1"></i>
                        &nbsp;Feb 19
                    </a>
                </div>
            </div>
        </article>
    </div>
</div>