Component Library

Hero Stories Feed Item 

<div class="hero-stories-feed-item">
    <div class="hero-stories-feed-item__media">
        <div class="hero-stories-feed-item__media-container">
            <a href="#"><img class="hero-stories-feed-item__media-image" src="../../img/Component-Feature-News-Story-Image.jpg" alt="Turpis cursus in hac" loading="lazy" /></a>
        </div>
    </div>
    <div class="hero-stories-feed-item__content">
        <div class="hero-stories-feed-item__content-tags">
            <ul>
                <li>Lorem ipsum</li>
                <li>dolor sit</li>
            </ul>
        </div>
        <h2 class="hero-stories-feed-item__title">
            <a class="iastate22-link-secondary" href="#">Lorem ipsum dolor sit<span class="arrow"></span></a>
        </h2>
        <p class="hero-stories-feed-item__content-date">September 12, 2023</p>
    </div>
</div>
 
<div class="hero-stories-feed-item">
  {% if image %}
  <div class="hero-stories-feed-item__media">
    <div class="hero-stories-feed-item__media-container">
      <a href="{{url}}"><img class="hero-stories-feed-item__media-image" src="{{ image.src }}" alt="{{ image.alt }}" loading="lazy" /></a>
    </div>
  </div>
  {% endif %}
  <div class="hero-stories-feed-item__content">
    <div class="hero-stories-feed-item__content-tags">
      <ul>
        {% for item in tags %}
          <li>{{ item }}</li>
        {% endfor %}
      </ul>
    </div>
    <h2 class="hero-stories-feed-item__title">
      <a class="iastate22-link-secondary" href="{{url}}" {% if external == true %} target="_blank" {% endif %}>{{ title }}<span class="arrow"></span></a>
    </h2>
    <p class="hero-stories-feed-item__content-date">{{ date }}</p>
  </div>
</div>
 
{
  "tags": [
    "Lorem ipsum",
    "dolor sit"
  ],
  "url": "#",
  "image": {
    "src": "../../img/Component-Feature-News-Story-Image.jpg",
    "alt": "Lorem ipsum dolor sit"
  },
  "title": "Lorem ipsum dolor sit",
  "date": "September 12, 2023"
}
  • Content: 
    .hero-stories-feed-item {
  display: flex;
  gap: 0;
  margin-bottom: rem(33);
  flex-direction: column;
  @include media-breakpoint-up(lg) {
    flex-direction: row;
    gap: rem(35);
    margin-bottom: rem(50);
  }
  .hero-stories-feed-item__media {
    .hero-stories-feed-item__media-container {
      @extend %responsive-img;
      min-width: rem(400);
      .hero-stories-feed-item__media-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        position: absolute;
        top: 0;
        left: 0;
      }
      &:before {
        padding-top: 66.7%;
      }
    }
  }
  .hero-stories-feed-item__content {
    margin: auto 0;
    width: 100%;
    padding: rem(13) rem(20);
    border-left: solid rem(2) #f1be48;
    .hero-stories-feed-item__content-tags {
      ul {
        margin: 0;
        li {
          color: $iastate-red;
          font-size: rem(16);
          font-weight: 600;
          display: inline;
          padding-right: rem(15);
        }
      }
    }
    .hero-stories-feed-item__title {
      padding: 0;
      margin: 0;
      line-height: rem(16);
      .iastate22-link-secondary {
        margin-top: 0;
      }
    }
    .hero-stories-feed-item__content-date {
      margin: 0;
    }
  }
}
  • URL: /components/raw/hero-stories-feed-item/_hero-stories-feed-item.scss
  • Filesystem Path: src/components/hero-stories-feed-item/_hero-stories-feed-item.scss
  • Size: 1.3 KB

There are no notes for this item.