<div id="post-766" class="post-card post-card--default">
    <div class="post-card__image-container">
        <a class="post-card__post-link" href="#">
      <img class="post-card__image u-object-fit-cover" src="/assets/images/big-card-right-small.jpg" alt="Image alt text">
    </a>
    </div>
    <div class="post-card__meta">
        <ul class="post-card__categories">
            <li class="post-card__category"><a class="post-card__category-link" href="#">Style</a></li>
            <li class="post-card__category"><a class="post-card__category-link" href="#">Style</a></li>
        </ul>
        <ul class="post-card__tags">
            <li class="post-card__tag"><a class="post-card__tag-link" href="#">Luxury Collection</a></li>
            <li class="post-card__tag"><a class="post-card__tag-link" href="#">Vintage Line</a></li>
            <li class="post-card__tag"><a class="post-card__tag-link" href="#">Vinyl Limited Edition</a></li>
            <li class="post-card__tag"><a class="post-card__tag-link" href="#">New Product Releases</a></li>
        </ul>
    </div>
    <div class="post-card__content">
        <a class="post-card__post-link" href="#">
            <h2 class="post-card__title">Article post title very very very long long long title</h2>
            <div class="post-card__excerpt">Duis nec placerat diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque sit amet nunc quis magna lobortis&hellip;</div>
        </a>
    </div>
</div>
<div id="{{id}}" class="post-card post-card--{{modifier}}">
  <div class="post-card__image-container">
    <a class="post-card__post-link" href="{{postUrl}}">
      <img class="post-card__image u-object-fit-cover" src="{{image}}" alt="{{alt}}">
    </a>
  </div>
  <div class="post-card__meta">
    <ul class="post-card__categories">
      {{#each categories}}
      <li class="post-card__category"><a class="post-card__category-link" href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ul>
    <ul class="post-card__tags">
      {{#each tags}}
      <li class="post-card__tag"><a class="post-card__tag-link" href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ul>
  </div>
  <div class="post-card__content">
    <a class="post-card__post-link" href="{{postUrl}}">
      <h2 class="post-card__title">{{title}}</h2>
      <div class="post-card__excerpt">{{{content}}}</div>
    </a>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .post-card {
      max-width: 340px;
      margin: 0;
      background: $color-lighter;
      text-align: center;
    }
    
    .post-card__meta {
      padding: $gutter-width 30px 0;
    }
    
    .post-card__categories {
      margin: 0;
      padding: 0;
    }
    
    .post-card__tags {
      margin: $gutter-width-half 0;
      padding: 0;
    }
    
    .post-card__category,
    .post-card__tag {
      display: inline;
      margin: 0;
      padding: 0;
    
      &:not(:last-child) a:after {
        content: ', ';
      }
    }
    
    .post-card__category-link {
      color: $color-darkest;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      line-height: 1.6rem;
      text-decoration: none;
      text-transform: uppercase;
    }
    
    .post-card__tag-link {
      color: $color-medium-light;
      font-size: 1.4rem;
      line-height: 1.6rem;
      text-decoration: none;
    }
    
    .post-card__content {
      padding: 0 30px 30px;
    }
    
    .post-card__post-link {
      display: block;
      text-decoration: none;
    }
    
    .post-card__title {
      margin: $gutter-width 0 $gutter-width-half;
      color: $color-darkest;
      font-size: 1.9rem;
      font-weight: $font-weight-bold;
      line-height: 2.4rem;
      text-align: left;
    }
    
    .post-card__excerpt {
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.6rem;
      text-align: left;
    }
    
  • URL: /components/raw/post-card/post-card.scss
  • Filesystem Path: src/components/02-components/post-card/post-card.scss
  • Size: 1.2 KB

There are no notes for this item.