Lehigh Clutch Style Guide

Side Bar News Listing 

<div class="news-list">
    <div class="sidebar-news-item">
        <h3><a href="#">News Title 1</a></h3>
        <p class="sidebar-news-dates">January 28, 2021</p>
    </div><!-- end sidebar-news-item -->
    <div class="sidebar-news-item">
        <h3><a href="#">News Title 2</a></h3>
        <p class="sidebar-news-dates">January 10, 2021</p>
    </div><!-- end sidebar-news-item -->
    <div class="sidebar-news-item">
        <h3><a href="#">News Title 3</a></h3>
        <p class="sidebar-news-dates">December 23, 2020</p>
    </div><!-- end sidebar-news-item -->
</div><!-- end news-list -->
 
<div class="news-list">
  {% block news_listing %}
    {% for news_listing in news_listings %}
      <div class="sidebar-news-item">
        <h3><a href="{{ news_listing.url }}">{{ news_listing.title }}</a></h3>
        <p class="sidebar-news-dates">{{ news_listing.date }}</p>
      </div><!-- end sidebar-news-item -->
    {% endfor %}
  {% endblock news_listing %}
</div><!-- end news-list -->
 
{
  "news_listings": {
    "1": {
      "title": "News Title 1",
      "url": "#",
      "date": "January 28, 2021"
    },
    "2": {
      "title": "News Title 2",
      "url": "#",
      "date": "January 10, 2021"
    },
    "3": {
      "title": "News Title 3",
      "url": "#",
      "date": "December 23, 2020"
    }
  }
}
  • Content: 
    .news-list {
  background-color: $grey_lightest;
  padding: 0 $spacer;
  border-top: 3px solid $accent_color;
  border-top: 3px solid var(--accent_color, $accent_color);

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

  .right-content & {
    margin: $spacer 0;
  }

  h2 {
    font-size: 1.25rem;
    font-weight: bold;
  }

  .sidebar-news-item {
    padding: $spacer 0;
    border-bottom: 3px solid $grey_light;

    &:last-of-type {
      border-bottom: 0;
    }

    h3 {
      font-size: 1.1rem;
      font-weight: bold;
      margin: 0;

      a {
        color: $grey_darkest;
        font-weight: 600;
        border: 0;
        text-decoration: none;

        .color-scheme-dark & {
          color: $white;
        }

        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }
    }

    p {
      margin: 0;
    }
  }
}
  • URL: /components/raw/side_news/side_news.scss
  • Filesystem Path: bits/04-components/side_bar/side_news/side_news.scss
  • Size: 886 Bytes

Display sidebar news component.