Lehigh Clutch Style Guide

Side Bar Events Listing 

<div class="sidebar_events-list">
    <div class="events-item">
        <div class="events-details">
            <h3><a href="#">Side Bar Event 1</a></h3>
            <p class="events-dates">January 28, 2021</p>
        </div>
        <div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
    </div><!-- end sidebar_events_item -->
    <div class="events-item">
        <div class="events-details">
            <h3><a href="#">Side Bar Event 2</a></h3>
            <p class="events-dates">January 10, 2021</p>
        </div>
        <div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
    </div><!-- end sidebar_events_item -->
    <div class="events-item">
        <div class="events-details">
            <h3><a href="#">Side Bar Event 3</a></h3>
            <p class="events-dates">December 23, 2020</p>
        </div>
        <div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
    </div><!-- end sidebar_events_item -->
</div><!-- end sidebar_events-list -->
 
<div class="sidebar_events-list">
  {% block events_listing %}
    {% for events_listing in events_listings %}
      <div class="events-item">
        <div class="events-details">
          <h3><a href="{{ events_listing.url }}">{{ events_listing.title }}</a></h3>
          <p class="events-dates">{{ events_listing.date }}</p>
        </div>
        <div class="event-img">{% include "@images--img" with {
            img: events_listing.img,
            imgAlt: events_listing.imgAlt
          } %}
        </div>
      </div><!-- end sidebar_events_item -->
    {% endfor %}
  {% endblock events_listing %}
</div><!-- end sidebar_events-list -->
 
{
  "title": "Upcoming Events",
  "events_listings": {
    "1": {
      "title": "Side Bar Event 1",
      "url": "#",
      "date": "January 28, 2021",
      "img": "/img/silhoutte.jpg",
      "imgAlt": "silhoutte profile"
    },
    "2": {
      "title": "Side Bar Event 2",
      "url": "#",
      "date": "January 10, 2021",
      "img": "/img/silhoutte.jpg",
      "imgAlt": "silhoutte profile"
    },
    "3": {
      "title": "Side Bar Event 3",
      "url": "#",
      "date": "December 23, 2020",
      "img": "/img/silhoutte.jpg",
      "imgAlt": "silhoutte profile"
    }
  }
}
  • Content: 
    .sidebar_events-list {
  background-color: $grey_lightest;
  background-color: var(--grey_lightes, $grey_lightest);
  margin: $space_and_half 0;
  padding: $spacer;
  border-top: 3px solid $accent_color;
  border-top: 3px solid var(--accent_color, $accent_color);

  .color-scheme-dark & {
    background-color: $dark_mode_grey;
    background-color: var(--dark_mode_grey, $dark_mode_grey);
  }

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

  .events-item {
    margin: $spacer 0;
    padding: 0 0 $spacer 0;
    border-bottom: 3px solid $grey_light;
    border-bottom: 3px solid var(--grey_light, $grey_light);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    &:first-of-type {
      margin: 0 0 $spacer 0;
    }

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

    .event-img {
      a {
        border: 0;
      }

      img {
        max-height: 75px;
        max-width: 75px;
        margin: 0 0 0 $spacer;
      }
    }

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

      a {
        color: $grey_darkest;
        color: var(--grey_darkest, $grey_darkest);
        font-weight: 600;
        border-bottom: 0;

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

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

    .events-dates {
      margin: $space-one-half 0;
      font-size: .875rem;
    }

    .events-description {
      margin: $space-one-half 0 0 0;
      font-size: .875rem;
    }
  }
}
  • URL: /components/raw/side_events/side_events.scss
  • Filesystem Path: bits/04-components/side_bar/side_events/side_events.scss
  • Size: 1.6 KB

Display sidebar events listing component.