beaverbuilder
2/8/2018 - 2:16 AM

Post Card Layout HTML

This snippet is used on the following knowledge base article - http://kb.wpbeaverbuilder.com/article/577-create-a-card-layout-for-posts-themer

post-card-layout.html
content_copyfile_download
[wpbb-if post:featured_image]
<a class="post-card-image-link" href="[wpbb post:url]">
    <div class="post-card-image" style="background-image: url([wpbb post:featured_image size='full' display='url']);"></div>
</a>
<div class="post-card-content">
    <a class="post-card-content-link" href="[wpbb post:url]">
        <header class="post-card-header">
            <span class="post-card-category">[wpbb post:terms_list taxonomy='category' separator=', ' linked='no']</span>
            <h2 class="post-card-title">[wpbb post:title]</h2>
        </header>
        <section class="post-card-excerpt">
            [wpbb post:excerpt length='12' more='']
        </section>
    </a>
</div>
[wpbb-else]
<div class="post-card-content">
    <a class="post-card-content-link" href="[wpbb post:url]">
        <header class="post-card-header">
            <span class="post-card-category">[wpbb post:terms_list taxonomy='category' separator=', ' linked='no']</span>
            <h2 class="post-card-title">[wpbb post:title]</h2>
        </header>
        <section class="post-card-excerpt">
            [wpbb post:excerpt length='46' more='']
        </section>
    </a>
</div>
[/wpbb-if]