TACC UI Pattern Library

C Feed List: Default

No notes defined.

<h2>Table of Contents</h2>
<nav class="c-nav">
    <ul>
        <li><a href="#minimal">Minimal Example</a></li>
        <li><a href="#complex">Complex Example</a></li>
    </ul>
</nav>

<div class="demo-grid demo-grid--plain">
    <section>
        <h2 id="minimal">Minimal Example</h2>
        <div class="c-feed-list">
            <h3>Upcoming Events</h3>

            <article>
                <time>May 15, 2024</time>
                <h4>
                    <a href="#">Workshop: Advanced Data Analysis</a>
                </h4>
                <p>Join us for an in-depth workshop on advanced data analysis techniques and best practices.</p>
            </article>

            <article>
                <time>May 20–22, 2024</time>
                <h4>
                    <a href="#">Annual Conference</a>
                </h4>
                <p>Our flagship event featuring keynote speakers, technical sessions, and networking opportunities.</p>
            </article>

            <p>
                <a href="#">
                    <i class="icon icon-push-right">&gt;</i>
                    See All Events
                </a>
            </p>
        </div>
    </section>

    <section>
        <h2 id="complex">Complex Example</h2>
        <div class="c-feed-list">
            <h3>User Updates</h3>

            <article>
                <time data-prefix="Published:" datetime="2024-04-29">
                    <span>April 29, 2024</span>
                </time>
                <h4><a href="#" target="_blank">New Feature Release</a></h4>
                <p>We're excited to announce the release of new features to enhance your experience. These updates include improved performance and additional customization options.</p>
                <p><a href="#" class="c-button c-button--primary" target="_blank">Learn More</a></p>
            </article>

            <article class="has-update">
                <time data-prefix="Published:" datetime="2024-04-28">
                    <span>April 28, 2024</span>
                    <span class="c-pill c-pill--is-updated">Update</span>
                </time>
                <h4><a href="#" target="_blank">System Maintenance</a></h4>
                <p>Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>
                <p><a href="#" class="c-button c-button--primary" target="_blank">View Details</a></p>
            </article>

            <p>
                <a href="#">
                    <i class="icon icon-push-right">&gt;</i>
                    See All Updates
                </a>
            </p>
        </div>
    </section>
</div>
 
{
  "shouldSkipPattern": false,
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ],
  "subdir": "components"
}