Lehigh Clutch Style Guide

News 

<section class="news-section">
    <h2>WMS & Drupal News</h2>
    <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">
            <img src="/img/silhoutte.jpg" alt="" />
        </div>
        <div class="news-item-desc">
            <div class="news-item-date">
                January 28, 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">
            <img src="/img/silhoutte.jpg" alt="" />
        </div>
        <div class="news-item-desc">
            <div class="news-item-date">
                January 31, 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>
    </article>
</section>
 
<section class="news-section">
{% block news_title %}
  {% if section_title %}
	<h2>{{ section_title }}</h2>
  {% endif %}
{% endblock news_title %}
  {% block news_listing %}
    {% for news_item in news_items %}
      {% include "@news_item" with news_item only %}
    {% endfor %}
  {% endblock news_listing %}
</section>
 
{
  "section_title": "WMS & Drupal News",
  "news_items": {
    "1": {
      "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."
    },
    "2": {
      "news_date": "January 28, 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."
    },
    "3": {
      "news_date": "January 31, 2020",
      "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-section {
  margin: $space-two 0;

  .news-list {
    background-color: unset;
    padding: 0;
    border-top: 0;

    .form--inline {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
      margin: 0 0 $spacer 0;

      .form-item {
        margin-bottom: 0;

        input[type=submit] {
          max-height: 50px;
          margin: $spacer 0 0 0;
        }
      }
    }
  }

  .news-item {
    margin: 0 0 $space_two 0;

    &:last-of-type {
      margin: 0;
    }
  }
}
  • URL: /components/raw/news/news.scss
  • Filesystem Path: bits/05-sections/news/news.scss
  • Size: 532 Bytes

Display the news preview section.