News & Event Feeds

<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>

<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>

<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>