Demo
Note
- The post module is highly configurable. Variations can be applied to provide different layouts.
- When styling post modules, the base layout (grid, positioning) should be contained in the parent post-module styles, while any theming (colors, fonts, spacing) should take place in the child.
- Below are static examples. To view actual markup with PHP, see post-module.php in parent theme.
States & Variations
All elements included (Static markup)
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
xxxxxxxxxx
<div class="post-module post-module--variation-demo">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<div class="post-module__avatar">
<img src="https://design.system1.com/wp-content/themes/s1-design-portal/dist/img/sites/system1/system1-avatar.png" decoding="async" height="150" width="150" alt="Avatar" /> </div>
<a class="post-module__author" href="#">by Stephen McGhee</a>
<span class="post-module__date">Jul 8, 2021</span>
<a class="post-module__category-link" href="https://legalboulevard.com/employment/" aria-label="More from Employment">
<span class="post-module__category">Category name</span>
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<div class="post-module__description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.</p></div>
<a class="post-module__button" href="#" alt="Read More">Read More<span class="screen-reader-text"> about title</span></a>
<p class="post-module__read-time">4 min read</p>
</article>
</div>
Variation 1
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.v>
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.v>
xxxxxxxxxx
<div class="post-module post-module--variation-1">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<a class="post-module__category-link" href="https://legalboulevard.com/employment/" aria-label="More from Employment">
<span class="post-module__category">Category name</span>
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<div class="post-module__description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.</di</p>v>
</article>
</div>
Variation 2
xxxxxxxxxx
<div class="post-module post-module--variation-2">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
</article>
</div>
Variation 3 (Sidebar)
xxxxxxxxxx
<div class="post-module post-module--variation-3">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<p class="post-module__read-time">4 min read</p>
</article>
</div>
Variation 4
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.v>
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.v>
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.v>
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.v>
xxxxxxxxxx
<div class="post-module post-module--variation-4">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<div class="post-module__description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.</di</p>v>
</article>
</div>
Variation 5
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
xxxxxxxxxx
<div class="post-module post-module--variation-5">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<a class="post-module__category-link" href="https://legalboulevard.com/employment/" aria-label="More from Employment">
<span class="post-module__category">Category name</span>
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<div class="post-module__description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.</p></div>
</article>
</div>
Variation 6 (Search)
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
xxxxxxxxxx
<div class="post-module post-module--variation-6">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<div class="post-module__description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.</p></div>
<p class="post-module__read-time">4 min read</p>
</article>
</div>
Variation 7
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
xxxxxxxxxx
<div class="post-module post-module--variation-7">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<a class="post-module__category-link" href="https://legalboulevard.com/employment/" aria-label="More from Employment">
<span class="post-module__category">Category name</span>
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<div class="post-module__description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.</p></div>
<p class="post-module__read-time">4 min read</p>
</article>
</div>
Variation 8
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
xxxxxxxxxx
<div class="post-module post-module--variation-8">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<a class="post-module__category-link" href="https://legalboulevard.com/employment/" aria-label="More from Employment">
<span class="post-module__category">Category name</span>
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<div class="post-module__description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.</p></div>
<p class="post-module__read-time">4 min read</p>
</article>
</div>
Variation 9
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
Post Module Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.
4 min read
xxxxxxxxxx
<div class="post-module post-module--variation-9">
<article class="post-module__item">
<a class="post-module__thumb-link" aria-label="thumb-link" href="#" alt="Title">
<img loading="lazy" src="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-attr="eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwiaGVpZ2h0IjozMTUsInBvc2l0aW9uIjoidG9wIn19fQ==" data-url="https://cdn.walletgenius.com/" sizes="(max-width:576px) 30vw, (max-width:992px) 50vw, (max-width:1400px) 100vw, 900w" width="600" height="315" data-src="https://walletgenius.com/wp-content/uploads/2022/08/shutterstock_1285504330-600x315.jpg" class="cdn-ih post-module__thumb wp-post-image" alt="" srcset="https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjkwMCwicG9zaXRpb24iOiJ0b3AifX19 900w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjYwMCwicG9zaXRpb24iOiJ0b3AifX19 600w, https://cdn.walletgenius.com/eyJidWNrZXQiOiJwdWItc3RvcmFnZSIsImtleSI6IndhbGxldGdlbml1cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMi8wOC9zaHV0dGVyc3RvY2tfMTI4NTUwNDMzMC5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsiZml0IjoiY292ZXIiLCJiYWNrZ3JvdW5kIjp7InIiOjAsImciOjAsImIiOjAsImFscGhhIjoxfSwid2lkdGgiOjQwMCwicG9zaXRpb24iOiJ0b3AifX19 400w">
</a>
<div class="post-module__avatar">
<img src="https://design.system1.com/wp-content/themes/s1-design-portal/dist/img/sites/system1/system1-avatar.png" decoding="async" height="150" width="150" alt="Avatar" /> </div>
<a class="post-module__author" href="#">by Stephen McGhee</a>
<span class="post-module__date">Jul 8, 2021</span>
<a class="post-module__category-link" href="https://legalboulevard.com/employment/" aria-label="More from Employment">
<span class="post-module__category">Category name</span>
</a>
<h3 class="post-module__heading">
<a class="post-module__heading-link" href="#" alt="Title">Post Module Heading</a>
</h3>
<div class="post-module__description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, beatae nostrum eos voluptatum magnam possimus aut esse doloremque consequatur quam amet minima facere quis fugiat ipsa, totam aperiam qui maiores.</p></div>
<a class="post-module__button" href="#" alt="Read More">Read More<span class="screen-reader-text"> about title</span></a>
<p class="post-module__read-time">4 min read</p>
</article>
</div>
Usage
In our Wordpress templates, we can add a block of PHP, with various options to configure the post module.
These options, including the CSS variation, can be changed in the Wordpress admin.
xxxxxxxxxx
PFE\getComponent('post-module', ['posts_per_page' => $post_info['post_per_page'], 'tax_query' => $post_info['tax_args'], 'post__not_in' => array(get_the_ID()), 'class_modifier' => $post_info['css_class_modifier'], 'heading' => $post_info['post_module_heading']]);
For more information please visit Unified Post Module.
Element Info
post-module--variation-n |
The variation controls the layout and styling of the post module. |
---|---|
post-module__item |
A post within the parent post module. |
post-module__thumb + post-module__thumb-link |
The feature thumbnail from the post, and link to the post. |
post-module__avatar |
The authors avatar. |
post-module__author |
The authors name, along with a link to the author page. |
post-module__date |
The post date. |
post-module__category + post-module__category-link |
The category and link to the category page. |
post-module__key-interest + post-module__key-interest-link |
The key interest and link to the key interest page. |
post-module__heading + post-module__heading-link |
The posts heading, and a link to the post. |
post-module__description |
The posts description. Descriptions can have a line clamp applied to limit the lines. |
post-module__button |
A button which links to the post. |
post-module__read-time |
The read time for the post. |
Anatomy
- Post Module Item
- Post Module Thumb
- Post Module Category + Key Interest
- Post Module Date
- Post Module Avatar
- Post Module Author
- Post Module Heading
- Post Module Description
- Post Module Read Time
- Post Module Button