framework7-card-layout-page.html

<div data-name="products" class="page">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="back link icon-only">
                    <i class="icon icon-back"></i>
                </a>
            </div>
            <div class="title">Products</div>
        </div>
    </div>
    <div class="page-content">
        <div class="card demo-card-header-pic">
            <div style="background-image:url(https://www.hogaruniversal.com/sites/default/files/recetas/pan_choco_0.jpg)"
                class="card-header align-items-flex-end">Pan de Chocolate</div>
            <div class="card-content card-content-padding">
                <p class="date">Posted on February 25, 2019</p>
                <p>Pain au chocolat (French pronunciation: [pɛ̃ o ʃɔ.kɔ.la] (About this soundlisten), literally chocolate bread; also known as chocolatine in the south-west part of France and in Canada.</p>
            </div>
            <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
        </div>
    </div>
</div>