TACC UI Pattern Library

X Feed List

A list of preview content for articles, documents, or pages.

<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="x-feed-list">
            <h3 class="x-feed-list__title">Upcoming Events</h3>

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

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

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

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

            <article class="x-feed-list__item">
                <time class="x-feed-list__item-time" data-prefix="Published:" datetime="2024-04-29">
                    <span>April 29, 2024</span>
                </time>
                <h4 class="x-feed-list__item-name"><a href="#" target="_blank">New Feature Release</a></h4>
                <p class="x-feed-list__item-desc">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 class="x-feed-list__item-link"><a href="#" class="c-button c-button--primary" target="_blank">Learn More</a></p>
            </article>

            <article class="x-feed-list__item has-update">
                <time class="x-feed-list__item-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 class="x-feed-list__item-name"><a href="#" target="_blank">System Maintenance</a></h4>
                <p class="x-feed-list__item-desc">Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>
                <p class="x-feed-list__item-link"><a href="#" class="c-button c-button--primary" target="_blank">View Details</a></p>
            </article>

            <p class="x-feed-list__more">
                <a href="#" class="x-feed-list__more-link">
                    <i class="x-feed-list__more-icon  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": "tools",
  "supportStyles": [
    "../../assets/components/cortal-icon.css"
  ]
}