Lehigh Clutch Style Guide

News Item 

<article class="news-item card">
    <div class="news-item-thumb">
        <img src="/img/silhoutte.jpg" alt="" />
    </div>
    <div class="news-item-desc">
        <div class="news-item-date">
            January 27, 2020
        </div>
        <h3><a href="#">This is the Title</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus.</p>
        <div class="news-item-author">
            by: Author Name
        </div>
    </div>
</article>
 
<article class="news-item card">
  <div class="news-item-thumb">
    {% block news_image %}
      {% if news_img %}
        <img src="{{ news_img }}" alt="" />
      {% endif %}
    {% endblock news_image %}
  </div>
  <div class="news-item-desc">
    {% block news_date %}
      <div class="news-item-date">
        {{ news_date }}
      </div>
    {% endblock news_date %}
    {% block news_content %}
      <h3><a href="{{ news_link }}">{{ news_title }}</a></h3>
      <p>{{ news_description }}</p>
    {% endblock news_content %}
    {% block news_authors %}
      {% if news_author %}
        <div class="news-item-author">
          by: {{ news_author }}
        </div>
      {% endif %}
    {% endblock news_authors %}
  </div>
</article>
 
{
  "news_date": "January 27, 2020",
  "news_author": "Author Name",
  "news_img": "/img/silhoutte.jpg",
  "news_link": "#",
  "news_title": "This is the Title",
  "news_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus."
}
  • Content: 
    .news-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $spacer;

  @include media-breakpoint-up(lg) {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .color-scheme-dark & {
    background-color: $dark_mode_grey;
  }

  &-date {
    margin: 0 0 $spacer 0;
  }

  &-author,
  &-date {
    font-style: italic;
  }

  &-author {
    margin: $spacer 0 0 0;
  }

  .color-scheme-dark & {
    &-author,
    &-date {
      color: var(--white, $white);
    }
  }

  &-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 $spacer;

    @include media-breakpoint-up(md) {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: unset;
      margin: 0;
    }
  }

  &-thumb {
    img {
      min-width: 150px;
      max-width: 150px;
      margin: 0 0 $spacer 0;

      @include media-breakpoint-up(md) {
        margin: 0 $spacer 0 0;
      }
    }

    .preview-img {
      max-width: unset !important;
      padding: 0 !important;
    }
  }

  &-desc {
    width: 100%;

    h3 {
      a {
        color: $navy_dark;
        color: var(--navy_dark, $navy_dark);
        border-bottom: 2px solid $navy_dark;
        border-bottom: 2px solid var(--navy_dark, $navy_dark);

        &:hover,
        &:focus {
          border-bottom: 0;
        }

        .color-scheme-dark & {
          color: var(--blue_75, $blue_75);
          border-bottom: 2px solid var(--grey_k60, $grey_k60);

          &:hover,
          &:focus {
            color: var(--white, $white) !important;
          }
        }
      }
    }

    p {
      color: var(--base_font, $base_font);
    }

    .color-scheme-dark & {
      p {
        color: var(--white, $white);
      }
    }
  }
}
  • URL: /components/raw/news_item/news_item.scss
  • Filesystem Path: bits/04-components/news_item/news_item.scss
  • Size: 1.8 KB

Display individual news listing. It is a part of the news component.