Component Library

Upcoming Events 

<div class="paragraph-widget paragraph-widget--upcoming-events">
    <div class="upcoming-events">
        <h2>Upcoming Events</h2>
        <dl class="upcoming-events__wrap">
            <dt class="upcoming-events__date">
          <time datetime="2023-01-10">
            <span class="month">Jan</span>
            <span class="day">10</span>
          </time>
        </dt>
            <dd class="upcoming-events__details">
                <h4 class="upcoming-events__title">
                    <a href="#" class="link-set__link iastate22-link-secondary">Long Event Title Fore Feature Lorem Ipsum Dolor Sit<span class="arrow"></span></a>
                </h4>
                <div class="upcoming-events__time">1:00 pm to 2:00 pm</div>
            </dd>
            <dt class="upcoming-events__date">
          <time datetime="2023-01-13">
            <span class="month">Jan</span>
            <span class="day">13</span>
          </time>
        </dt>
            <dd class="upcoming-events__details">
                <h4 class="upcoming-events__title">
                    <a href="#" class="link-set__link iastate22-link-secondary">Event Title Lorem Ipsum Dolor Sit<span class="arrow"></span></a>
                </h4>
                <div class="upcoming-events__time">1:00 pm to 2:00 pm</div>
            </dd>
            <dt class="upcoming-events__date">
          <time datetime="2023-01-15">
            <span class="month">Jan</span>
            <span class="day">15</span>
          </time>
        </dt>
            <dd class="upcoming-events__details">
                <h4 class="upcoming-events__title">
                    <a href="#" class="link-set__link iastate22-link-secondary">The First Annual Montgomery Burns Award for Outstanding Achievement in the Field of Excellence<span class="arrow"></span></a>
                </h4>
                <div class="upcoming-events__time">2:00 pm to 4:00 pm</div>
            </dd>
            <dt class="upcoming-events__date">
          <time datetime="2023-01-17">
            <span class="month">Jan</span>
            <span class="day">17</span>
          </time>
        </dt>
            <dd class="upcoming-events__details">
                <h4 class="upcoming-events__title">
                    <a href="#" class="link-set__link iastate22-link-secondary">Long Event Title Fore Feature Lorem Ipsum Dolor Sit<span class="arrow"></span></a>
                </h4>
                <div class="upcoming-events__time">1:00 pm to 2:00 pm</div>
            </dd>
        </dl>
        <div class="upcoming-events__cta"><a href="#" class="iastate22-button">Browse All Events<span class="arrow"></span></a></div>
    </div>
</div>
 
<div class="paragraph-widget paragraph-widget--upcoming-events">
  <div class="upcoming-events">
    <h2>{{ title }}</h2>
    <dl class="upcoming-events__wrap">
      {% for event in events %}
        <dt class="upcoming-events__date">
          <time datetime="{{ event.date.datetime }}">
            <span class="month">{{ event.date.month }}</span>
            <span class="day">{{ event.date.day }}</span>
          </time>
        </dt>
        <dd class="upcoming-events__details">
          <h4 class="upcoming-events__title">
            <a href="{{ event.link.url }}" class="link-set__link iastate22-link-secondary">{{ event.title }}<span class="arrow"></span></a>
          </h4>
          <div class="upcoming-events__time">{{ event.date.time }}</div>
        </dd>
      {% endfor %}
    </dl>
    <div class="upcoming-events__cta"><a href="{{ cta.url }}" class="iastate22-button">{{ cta.label }}<span class="arrow"></span></a></div>
  </div>
</div>
 
{
  "title": "Upcoming Events",
  "events": [
    {
      "date": {
        "datetime": "2023-01-10",
        "month": "Jan",
        "day": "10",
        "time": "1:00 pm to 2:00 pm"
      },
      "title": "Long Event Title Fore Feature Lorem Ipsum Dolor Sit",
      "link": {
        "url": "#"
      }
    },
    {
      "date": {
        "datetime": "2023-01-13",
        "month": "Jan",
        "day": "13",
        "time": "1:00 pm to 2:00 pm"
      },
      "title": "Event Title Lorem Ipsum Dolor Sit",
      "link": {
        "url": "#"
      }
    },
    {
      "date": {
        "datetime": "2023-01-15",
        "month": "Jan",
        "day": "15",
        "time": "2:00 pm to 4:00 pm"
      },
      "title": "The First Annual Montgomery Burns Award for Outstanding Achievement in the Field of Excellence",
      "link": {
        "url": "#"
      }
    },
    {
      "date": {
        "datetime": "2023-01-17",
        "month": "Jan",
        "day": "17",
        "time": "1:00 pm to 2:00 pm"
      },
      "title": "Long Event Title Fore Feature Lorem Ipsum Dolor Sit",
      "link": {
        "url": "#"
      }
    }
  ],
  "cta": {
    "url": "#",
    "label": "Browse All Events"
  }
}
  • Content: 
    .upcoming-events {
  margin: 60px auto;

  @include media-breakpoint-up(lg) {
    margin: 133px auto 100px;
  }
}

.upcoming-events h2 {
  @extend %h2-yellow-border;

  @include media-breakpoint-up(lg) {
    margin-bottom: 30px;
  }
}

.upcoming-events__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;

  @include media-breakpoint-up(lg) {
    width: 80%;
  }
}

.upcoming-events__date {
  width: 60px;
  height: 60px;
  background: $iastate-red;
  margin-right: 20px;
  margin-bottom: 27px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  @include media-breakpoint-up(lg) {
    width: 82px;
    height: 82px;
  }

  > time {
    text-align: center;
    color: $white;
    font-size: 1rem;
    line-height: rem(22);
    font-weight: 700;

    @include media-breakpoint-up(lg) {
      font-size: rem(18);
    }

    span {
      display: block;
    }
  }
}
.upcoming-events__details {
  width: calc(100% - 80px);
  margin-inline-start: 0;
  margin-bottom: 27px;

  @include media-breakpoint-up(lg) {
    width: calc(100% - 102px);
  }
}

.upcoming-events__title {
  margin-bottom: 10px;
}
  • URL: /components/raw/upcoming-events/_upcoming-events.scss
  • Filesystem Path: src/components/upcoming-events/_upcoming-events.scss
  • Size: 1.2 KB

There are no notes for this item.