Lehigh Clutch Style Guide

Aggregator Listing 

<div class="aggregator_feed">

    <h2>University News</h2>

    <div class="item-list">
        <ul>
            <li>
                <a href="#">Side Bar Event 1</a>
            </li>
            <li>
                <a href="#">Side Bar Event 2</a>
            </li>
            <li>
                <a href="#">Side Bar Event 3</a>
            </li>
        </ul>
    </div>
    <a href="#" title="View more at Lehigh News (opens in a new window)" class="btn gold ext" data-extlink="" aria-label="(link is external)" rel="noreferrer">View more at Lehigh News<span class="fa-ext extlink" role="img" aria-hidden="false">
            <span class="fa fa-external-link" data-extlink-placement="append" aria-hidden="true"></span>
        </span></a>
</div>
<!-- end aggregator_feed -->
 
<div class="aggregator_feed">

{% block sidebar_title %}
	<h2>{{ title }}</h2>
{% endblock sidebar_title %}

	{% block aggregator_listing %}
  <div class="item-list">
    <ul>
		{% for aggregator_listing in aggregator_listings %}
			<li>
          <a href="{{ aggregator_listing.url }}">{{ aggregator_listing.title }}</a>
			</li>
		{% endfor %}
    </ul>
  </div>
	{% endblock aggregator_listing %}
  {% block more_link %}
  <a href="{{ more_link.url }}" title="{{ more_link.title }} (opens in a new window)" class="btn gold ext" data-extlink="" aria-label="(link is external)" rel="noreferrer">{{ more_link.title }}<span class="fa-ext extlink" role="img" aria-hidden="false">
    <span class="fa fa-external-link" data-extlink-placement="append" aria-hidden="true"></span>
  </span></a>
  {% endblock more_link %}
</div>
<!-- end aggregator_feed -->
 
{
  "title": "University News",
  "aggregator_listings": {
    "1": {
      "title": "Side Bar Event 1",
      "url": "#"
    },
    "2": {
      "title": "Side Bar Event 2",
      "url": "#"
    },
    "3": {
      "title": "Side Bar Event 3",
      "url": "#"
    }
  },
  "more_link": {
    "title": "View more at Lehigh News",
    "url": "#"
  }
}
  • Content: 
    /** Selector used for all of this type. */
.aggregator_feed {
  .item-list {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;

      li {
        padding: 0;
        margin: 0 0 $spacer 0;
        padding: $spacer;
        border-top: 3px solid $accent_color;
        border-top: 3px solid var(--accent_color, $accent_color);

        width: 100%;
        background-color: $white;
        background-color: var(--white, $white);
        border-left: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 5px;
        border-top: 3px solid $accent_color;
        border-top: 3px solid var(--accent_color, $accent_color);
        -webkit-box-shadow: 0 5px 15px $drop_shadow;
        -moz-box-shadow: 0 5px 15px $drop_shadow;
        box-shadow: 0 5px 15px $drop_shadow;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;

        &:hover,
        &:focus-within {
          -webkit-box-shadow: 0 0 10px $drop_shadow;
          -moz-box-shadow: 0 0 10px $drop_shadow;
          box-shadow: 0 0 10px $drop_shadow;

          .card_image {
            img {
              transform: scale(1.25);
            }
          }
        }

        a {
          font-size: 2rem;
          color: var(--base_font, $base_font);
          border-bottom: none;
          text-decoration: underline;

          &:hover,
          &:focus {
            border-bottom: none;
            text-decoration: none;
          }
        }
      }
    }
  }

  .right-content & {
    .item-list {
      ul {
        li {
          a {
            font-size: 1rem;
          }
        }
      }
    }
  }
}
  • URL: /components/raw/aggregator/aggregator.scss
  • Filesystem Path: bits/04-components/aggregator/aggregator.scss
  • Size: 1.8 KB

Display sidebar feed aggregator component.