Post Module

Post Modules are highly configurable lists of posts, used throughout our sites.

Demo

by Stephen McGhee Jul 8, 2021 Category name

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

<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>

/* Please refer to the parent unified themes post-module.scss file, as well as the child themes post-module.scss file.
What you see below is only for demo purposes. */

/* ==================================================================
	POST MODULE
================================================================== */

.post-module {
  @include post-module;
  @include display-grid;
}

/* ==================================================================
	POST MODULE VARIATION DEMO
================================================================== */

.post-module--variation-demo {
  gap: 1.5rem 3%;

  .post-module {
    &__item {
      align-content: start;
      background-color: var(--white);
      border-radius: var(--border-radius);
      border: .0625rem solid var(--light-gray-1);
      display: grid;
      gap: 0.5rem 0.25rem;
      grid-template-columns: auto auto 1fr;
      grid-template-areas:
      "thumb-link thumb-link thumb-link"
      "category-link category-link date"
      "avatar author author"
      "heading heading heading"
      "description description description"      
      "read-time read-time button";
      padding: 1rem;
      position: relative;
    }

    &__avatar {
      background-color: var(--light-gray-1);
      block-size: 2.5rem;
      border-radius: 50%;
      grid-area: avatar;
      inline-size: 2.5rem;
      margin: 0;
      overflow: hidden;
      position: relative;
    }

    &__author {
      align-self: center; /*for demo purposes only*/
      grid-area: author;
      text-decoration: none;
    }

    &__thumb-link {
      grid-area: thumb-link;
      position: relative;
    }

    &__date {
      grid-area: date;
      justify-self: end;
    }
    
    &__thumb {
      block-size: 11.25rem;
      inline-size: 100%;
      object-fit: cover;
    }

    &__category {
      color: var(--accent-1);
      font-weight: 700;
      font-size: .9375rem;
      text-decoration: none;
    }

    &__category-link {
      grid-area: category-link;
      text-decoration: none;
    }

    &__heading {
      font-size: 1.125rem; 
      grid-area: heading;
    }

    &__heading-link {
      color: var(--black);
      text-decoration: none;
    }

    &__description {
      @include line-clamp(3);
      grid-area: description;
      margin-block-end: 0.5rem;

      p {
        font-size: .875rem;
        line-height: 1.45;
      }
    }

    &__read-time {
      align-self: end;
      font-style: italic;
      grid-area: read-time;
      margin-block-end: 0;
    }

    &__button {
      @extend .button;
      justify-self: end!important;
      grid-area: button;
      text-decoration: none;
    }
  }
}

@media (min-width: $sm) {
  .post-module--variation-demo {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: $lg) {
  .post-module--variation-demo {
    .post-module {
      &__heading {
        font-size: 1.25rem;
        margin-block-end: 0.25rem;
      }
  
      &__description p {
        font-size: 1rem;
        line-height: 1.5;
      }
    }
  }
}

@media (min-width: $xl) {
  .post-module--variation-demo {
    .post-module {
      &__thumb {
        block-size: 13rem;
      }
    }
  }
}

No JS! 😀

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)

by Stephen McGhee Jul 8, 2021 Category name

Post Module Heading

4 min read

<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

Category name

Post Module Heading

Category name

Post Module Heading

<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

Post Module Heading

<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)

Post Module Heading

4 min read

Post Module Heading

4 min read

Post Module Heading

4 min read

<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

<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>

Post Module Heading

<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

4 min read

Post Module Heading

4 min read

Post Module Heading

4 min read

Post Module Heading

4 min read

<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

Category name

Post Module Heading

4 min read

Category name

Post Module Heading

4 min read

Category name

Post Module Heading

4 min read

Category name

Post Module Heading

4 min read

<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

Category name

Post Module Heading

4 min read

Category name

Post Module Heading

4 min read

Category name

Post Module Heading

4 min read

Category name

Post Module Heading

4 min read

<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

by Stephen McGhee Jul 8, 2021 Category name

Post Module Heading

4 min read

by Stephen McGhee Jul 8, 2021 Category name

Post Module Heading

4 min read

<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.

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

Demo

Note

States & Variations

All elements included (Static markup)

Variation 1

Variation 2

Variation 3 (Sidebar)

Variation 4

Variation 5

Variation 6 (Search)

Variation 7

Variation 8

Variation 9

Usage

Element Info

Anatomy