Component Library

Featured Events 

<div class="paragraph-widget paragraph-widget--upcoming-events">
    <div class="featured-events">
        <header class="featured-events__header">
            <h2>Featured Events Section Title</h2><a href="#" class="link-set__link link-tertiary">View All Events<span class="arrow"></span></a>
        </header>
        <div class="featured-events__wrap">

            <div class="featured-events__card">
                <div class="iastate22-card iastate22-card--feature-event">
                    <div class="iastate22-card__media">
                        <img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
                    </div>
                    <div class="iastate22-card__content">
                        <h2 class="iastate22-card__title">
                            <a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
                        </h2>
                        <div class="iastate22-card__body text-content">
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
                            <time class="iastate22-card__time" datetime="2023-01-04">Jan 4, 2023</time>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="featured-events__listing">
                <ul class="featured-events__listing-wrap">
                    <li class="featured-events__item">
                        <h4 class="featured-events__title">
                            <a href="#" class="link-set__link iastate22-link-secondary">Longer Title Fore Feature Lorem Ipsum Dolor Sit<span class="arrow"></span></a>
                        </h4>
                        <time datetime="2023-01-04">Jan 4, 2023</time>
                    </li>
                    <li class="featured-events__item">
                        <h4 class="featured-events__title">
                            <a href="#" class="link-set__link iastate22-link-secondary">Title Lorem Ipsum Dolor Sit<span class="arrow"></span></a>
                        </h4>
                        <time datetime="2023-01-04">Jan 4, 2023</time>
                    </li>
                    <li class="featured-events__item">
                        <h4 class="featured-events__title">
                            <a href="#" class="link-set__link iastate22-link-secondary">Very Long Title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor dolore magna aliqua.<span class="arrow"></span></a>
                        </h4>
                        <time datetime="2023-01-04">Jan 4, 2023</time>
                    </li>
                    <li class="featured-events__item">
                        <h4 class="featured-events__title">
                            <a href="#" class="link-set__link iastate22-link-secondary">Longer Title Fore Feature Lorem Ipsum Dolor Sit<span class="arrow"></span></a>
                        </h4>
                        <time datetime="2023-01-04">Jan 4, 2023</time>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
 
<div class="paragraph-widget paragraph-widget--upcoming-events">
  <div class="featured-events">
    <header class="featured-events__header">
      <h2>Featured Events Section Title</h2><a href="#" class="link-set__link link-tertiary">View All Events<span class="arrow"></span></a>
    </header>
    <div class="featured-events__wrap">

      <div class="featured-events__card">
        {% include "@card--feature-event" with feature_card %}
      </div>
      <nav class="featured-events__listing">
        <ul class="featured-events__listing-wrap">
          {% for item in feature_listing %}
            <li class="featured-events__item">
              <h4 class="featured-events__title">
                <a href="{{ item.link }}" class="link-set__link iastate22-link-secondary">{{ item.title }}<span class="arrow"></span></a>
              </h4>
              <time datetime="{{ item.date.datetime }}">{{ item.date.display }}</time>
            </li>
          {% endfor %}
        </ul>
      </nav>
    </div>
  </div>
</div>
 
{
  "title": "Featured Events Section Title",
  "link": {
    "url": "#",
    "label": "View All Events"
  },
  "feature_card": {
    "title": "Card Title Lorem Ipsum Dolor Sit Amet",
    "content": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.",
    "time": {
      "datetime": "2023-01-04",
      "display": "Jan 4, 2023"
    },
    "image": "../../img/Component-Card-Image-1.jpg",
    "url": "https://www.iastate.edu/"
  },
  "feature_listing": [
    {
      "title": "Longer Title Fore Feature Lorem Ipsum Dolor Sit",
      "link": "#",
      "date": {
        "datetime": "2023-01-04",
        "display": "Jan 4, 2023"
      }
    },
    {
      "title": "Title Lorem Ipsum Dolor Sit",
      "link": "#",
      "date": {
        "datetime": "2023-01-04",
        "display": "Jan 4, 2023"
      }
    },
    {
      "title": "Very Long Title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor dolore magna aliqua.",
      "link": "#",
      "date": {
        "datetime": "2023-01-04",
        "display": "Jan 4, 2023"
      }
    },
    {
      "title": "Longer Title Fore Feature Lorem Ipsum Dolor Sit",
      "link": "#",
      "date": {
        "datetime": "2023-01-04",
        "display": "Jan 4, 2023"
      }
    }
  ]
}
  • Content: 
    .featured-events {
}

.featured-events__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;

  @include media-breakpoint-up(lg) {
    flex-direction: row;
    align-items: flex-start;
  }
}

.featured-events__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 100%;
  margin-bottom: 20px;

  @include media-breakpoint-up(md) {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  h2 {
    @extend %h2-yellow-border;

    @include media-breakpoint-down(md) {
      &:after {
        left: calc(50% - 25px);
      }
    }
  }

  .link-tertiary {
    @include media-breakpoint-up(md) {
      margin-top: 8px;
    }
  }
}

.featured-events__card {
  max-width: 25rem;
  margin-bottom: 60px;
  @include media-breakpoint-up(lg) {
    min-width: 300px;
  }
}

.featured-events__listing {
  @include media-breakpoint-up(lg) {
    margin-left: 7%;
    flex: 1 0 auto;
  }
}

.featured-events__item {
  padding: 29px 30px 29px 0;
  border-bottom: solid 1px $off-white3;

  &:first-child {
    padding-top: 0;
  }

  &:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

.featured-events__title {
  margin-bottom: 15px;

  .iastate22-link-secondary {
    @include media-breakpoint-up(lg) {
      font-size: rem(22);
    }

    .arrow {
      bottom: 14px;
    }
  }
}

.featured-events__item time {
  color: $grey;
}
  • URL: /components/raw/featured-events/_featured-events.scss
  • Filesystem Path: src/components/featured-events/_featured-events.scss
  • Size: 1.5 KB

There are no notes for this item.