Component Library

Hero Stories Feed Item Set 

<div class="hero-stories-feed-item-set">
    <ul>
        <li>
            <div class="hero-stories-feed-item">
                <div class="hero-stories-feed-item__media">
                    <div class="hero-stories-feed-item__media-container">
                        <a href="https://www.iastate.edu/"><img class="hero-stories-feed-item__media-image" src="../../img/Component-Feature-News-Story-Image.jpg" alt="Lorem ipsum dolor sit" 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="https://www.iastate.edu/">Lorem ipsum dolor sit<span class="arrow"></span></a>
                    </h2>
                    <p class="hero-stories-feed-item__content-date">September 12, 2023</p>
                </div>
            </div>
        </li>
        <li>
            <div class="hero-stories-feed-item">
                <div class="hero-stories-feed-item__media">
                    <div class="hero-stories-feed-item__media-container">
                        <a href="https://www.iastate.edu/"><img class="hero-stories-feed-item__media-image" src="../../img/Component-Feature-News-Story-Image.jpg" alt="Interdum varius sit" loading="lazy" /></a>
                    </div>
                </div>
                <div class="hero-stories-feed-item__content">
                    <div class="hero-stories-feed-item__content-tags">
                        <ul>
                            <li>amet mattis vulputate</li>
                        </ul>
                    </div>
                    <h2 class="hero-stories-feed-item__title">
                        <a class="iastate22-link-secondary" href="https://www.iastate.edu/">Interdum varius sit<span class="arrow"></span></a>
                    </h2>
                    <p class="hero-stories-feed-item__content-date">September 18, 2023</p>
                </div>
            </div>
        </li>
        <li>
            <div class="hero-stories-feed-item">
                <div class="hero-stories-feed-item__media">
                    <div class="hero-stories-feed-item__media-container">
                        <a href="https://www.iastate.edu/"><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>condimentum</li>
                        </ul>
                    </div>
                    <h2 class="hero-stories-feed-item__title">
                        <a class="iastate22-link-secondary" href="https://www.iastate.edu/">Turpis cursus in hac<span class="arrow"></span></a>
                    </h2>
                    <p class="hero-stories-feed-item__content-date">September 24, 2023</p>
                </div>
            </div>
        </li>
    </ul>
</div>
 
<div class="hero-stories-feed-item-set">
  <ul>
    {% for item in items %}
      <li>
        {% include "@hero-stories-feed-item" with item %}
      </li>
    {% endfor %}
  </ul>
</div>
 
{
  "items": [
    {
      "tags": [
        "Lorem ipsum",
        "dolor sit"
      ],
      "url": "https://www.iastate.edu/",
      "image": {
        "src": "../../img/Component-Feature-News-Story-Image.jpg",
        "alt": "Lorem ipsum dolor sit"
      },
      "title": "Lorem ipsum dolor sit",
      "date": "September 12, 2023"
    },
    {
      "tags": [
        "amet mattis vulputate"
      ],
      "url": "https://www.iastate.edu/",
      "image": {
        "src": "../../img/Component-Feature-News-Story-Image.jpg",
        "alt": "Interdum varius sit"
      },
      "title": "Interdum varius sit",
      "date": "September 18, 2023"
    },
    {
      "tags": [
        "condimentum"
      ],
      "url": "https://www.iastate.edu/",
      "image": {
        "src": "../../img/Component-Feature-News-Story-Image.jpg",
        "alt": "Turpis cursus in hac"
      },
      "title": "Turpis cursus in hac",
      "date": "September 24, 2023"
    }
  ]
}

There are no notes for this item.