News & Event Feeds

Share your latest news and upcoming events

The IU framework has two main options for sharing news and events: you can use an automatic feed from the IU Newsroom or an IU calendar, or you can create a manual feed.

News feed - example 1

  • News Photo

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, rerum, omnis.

    July 15, 20114

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint repellat qui vitae veniam quidem repudiandae placeat iure tenetur eaque excepturi explicabo odit, aspernatur. Alias aliquid dolores adipisci iure libero error harum voluptate, nulla dignissimos iste, placeat aperiam nobis, nostrum! Facere corporis esse delectus tempore, ut ad architecto praesentium ex? Beatae at in quam cum ad! Est, iusto voluptatibus. Rerum, impedit.

  • Earum rerum provident eaque nihil animi, omnis voluptatem eius perferendis enim.

    July 15, 20114

    Vero error odio minima expedita odit natus doloremque iusto quidem officia distinctio, nobis, doloribus, quae voluptatibus adipisci id voluptatem! Sequi minus libero aliquam ex dolores culpa consequatur asperiores tenetur sit? Nulla aut atque, accusamus adipisci soluta vel perferendis, facilis quaerat porro, nihil fugit numquam. Itaque, optio, eveniet. Fugiat similique, modi maxime praesentium ex. Aspernatur et, eius dolore, asperiores rem facere.

Show/hide markup
<ul class="feed">
    <li class="feed-item news">
        <figure class="media image">
            <img src="https://placehold.it/152x152" alt="News Photo" />
        </figure>
    
        <div class="content">
            <h2 class="title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, rerum, omnis.</a></h2>
            <p class="meta date">July 15, 20114</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint repellat qui vitae veniam quidem repudiandae placeat iure tenetur eaque excepturi explicabo odit, aspernatur. Alias aliquid dolores adipisci iure libero error harum voluptate, nulla dignissimos iste, placeat aperiam nobis, nostrum! Facere corporis esse delectus tempore, ut ad architecto praesentium ex? Beatae at in quam cum ad! Est, iusto voluptatibus. Rerum, impedit.</p>
        </div>
    
    </li>

    <li class="feed-item news">
    
        <div class="content">
            <h2 class="title"><a href="#">Earum rerum provident eaque nihil animi, omnis voluptatem eius perferendis enim.</a></h2>
            <p class="meta date">July 15, 20114</p>
            <p>Vero error odio minima expedita odit natus doloremque iusto quidem officia distinctio, nobis, doloribus, quae voluptatibus adipisci id voluptatem! Sequi minus libero aliquam ex dolores culpa consequatur asperiores tenetur sit? Nulla aut atque, accusamus adipisci soluta vel perferendis, facilis quaerat porro, nihil fugit numquam. Itaque, optio, eveniet. Fugiat similique, modi maxime praesentium ex. Aspernatur et, eius dolore, asperiores rem facere.</p>
        </div>
    
    </li>
</ul>

News feed - example 2

Show/hide markup
<ul class="feed">
    <li class="feed-item feed-item--small news">
        <figure class="media">
            <img src="https://via.placeholder.com/152x152" alt="News Photo" />
        </figure>
    
        <div class="content">
            <h2 class="title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, rerum, omnis.</a></h2>
        </div>
    </li>
    

    <li class="feed-item feed-item--small news">
    
        <div class="content">
            <h2 class="title"><a href="#">Earum rerum provident eaque nihil animi, omnis voluptatem eius perferendis enim.</a></h2>
        </div>
    </li>
    

    <li class="feed-item feed-item--small news">
        <figure class="media">
            <img src="https://via.placeholder.com/152x152" alt="News Photo" />
        </figure>
    
        <div class="content">
            <h2 class="title"><a href="#">Odio unde mollitia ipsum adipisci, aliquid excepturi modi sed suscipit fuga!</a></h2>
        </div>
    </li>
    

    <li class="feed-item feed-item--small news">
        <figure class="media">
            <img src="https://via.placeholder.com/152x152" alt="News Photo" />
        </figure>
    
        <div class="content">
            <h2 class="title"><a href="#">Assumenda maxime asperiores possimus dolores eos quos dignissimos, dolor aperiam quo!</a></h2>
        </div>
    </li>
    
</ul>

Event feed - example 1

  • Event Photo

    Event Title

    October 1

    8:00 PM–10:00 PM

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore optio, enim sed eius quisquam suscipit soluta natus fugiat aspernatur corporis eos explicabo! Quibusdam harum repellendus dolorum modi corporis, incidunt officiis dolor facilis neque excepturi nesciunt, perspiciatis quia. Obcaecati consectetur, molestiae?

  • Event Title: Extra Long and Spans Multiple Lines Because it's Amazingly Long

    October 11

    10:00 AM–11:00 AM

    Ad necessitatibus doloremque a nam dignissimos, aliquid, mollitia repellendus dolorem, officia in qui, voluptatem culpa. Consectetur fugiat neque ipsa quam fuga assumenda sapiente praesentium laudantium. Itaque illo excepturi, quo, doloremque laudantium expedita quisquam, sit, unde mollitia ea reprehenderit saepe ad.

Show/hide markup
<ul class="feed">
    <li class="feed-item event">
        <figure class="media image">
            <img src="https://via.placeholder.com/152x152" alt="Event Photo" />
        </figure>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title</a></h2>
            <p class="meta meta-date">October 1</p>
            <p class="meta meta-time">8:00 PM&ndash;10:00 PM</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore optio, enim sed eius quisquam suscipit soluta natus fugiat aspernatur corporis eos explicabo! Quibusdam harum repellendus dolorum modi corporis, incidunt officiis dolor facilis neque excepturi nesciunt, perspiciatis quia. Obcaecati consectetur, molestiae?</p>
        </div>
    </li>

    <li class="feed-item event">
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Extra Long and Spans Multiple Lines Because it&#x27;s Amazingly Long</a></h2>
            <p class="meta meta-date">October 11</p>
            <p class="meta meta-time">10:00 AM&ndash;11:00 AM</p>
            <p>Ad necessitatibus doloremque a nam dignissimos, aliquid, mollitia repellendus dolorem, officia in qui, voluptatem culpa. Consectetur fugiat neque ipsa quam fuga assumenda sapiente praesentium laudantium. Itaque illo excepturi, quo, doloremque laudantium expedita quisquam, sit, unde mollitia ea reprehenderit saepe ad.</p>
        </div>
    </li>
</ul>

Event feed - example 2

Show/hide markup
<ul class="feed">
    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">1</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title</a></h2>
            <p class="meta meta-time">8:00 PM&ndash;10:00 PM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">11</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Extra Long and Spans Multiple Lines Because it&#x27;s Amazingly Long</a></h2>
            <p class="meta meta-time">10:00 AM&ndash;11:00 AM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">24</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Only Medium Length</a></h2>
            <p class="meta meta-time">1:00 PM&ndash;2:30 PM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">30</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Extra Long and Spans Multiple Lines Because it&#x27;s Amazing Long</a></h2>
            <p class="meta meta-time">10:00 AM&ndash;11:00 AM</p>
        </div>
    </li>
    
</ul>