Components

Feeds

A feed consists of a list of recurring elements of similar types. Examples of a feed would be a discussion feed.

PostPost › DefaultPost › LikePostdev ready

Preview

Code

<article class="slds-post">
  <header class="slds-post__header slds-media">
    <div class="slds-media__figure">
      <a href="javascript:void(0);" title="Jason Rodgers" class="slds-avatar slds-avatar--circle slds-avatar--large">
        <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
      </a>
    </div>
    <div class="slds-media__body">
      <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
        <p><a href="javascript:void(0);" title="Jason Rodgers">Jason Rogers</a><a href="javascript:void(0);" title="Design Systems">Design Systems</a></p>
        <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true"
          title="More Options">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Options</span>
          </button>
      </div>
      <p class="slds-text-body--small"><a href="javascript:void(0);" title="Click for single-item view of this post" class="slds-text-link--reset">5 days Ago</a></p>
    </div>
  </header>
  <div class="slds-post__content slds-text-longform">
    <p>Hey there! Here&#x27;s the latest demo presentation <a href="javascript:void(0);" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
  </div>
  <footer class="slds-post__footer">
    <ul class="slds-post__footer-actions-list slds-list--horizontal">
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Like this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
          </svg>Like</a>
      </li>
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Comment on this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share_post"></use>
          </svg> Comment</a>
      </li>
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Share this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
          </svg> Share</a>
      </li>
    </ul>
    <ul class="slds-post__footer-meta-list slds-list--horizontal slds-has-dividers--right slds-text-title">
      <li class="slds-item">20 shares</li>
      <li class="slds-item">259 views</li>
    </ul>
  </footer>
</article>

Post With QuestionPost With Questiondev ready

Preview

Code

<article class="slds-post">
  <header class="slds-post__header slds-media">
    <div class="slds-media__figure">
      <a href="javascript:void(0);" title="Jason Rodgers" class="slds-avatar slds-avatar--circle slds-avatar--large">
        <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
      </a>
    </div>
    <div class="slds-media__body">
      <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
        <p><a href="javascript:void(0);" title="Jason Rodgers">Jason Rogers</a><a href="javascript:void(0);" title="Design Systems">Design Systems</a></p>
        <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true"
          title="More Options">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Options</span>
          </button>
      </div>
      <p class="slds-text-body--small"><a href="javascript:void(0);" title="Click for single-item view of this post" class="slds-text-link--reset">5 days Ago</a></p>
    </div>
  </header>
  <div class="slds-post__content slds-text-longform">
    <h3 class="slds-text-heading--small">Barbecue Party Tips For A Truly Amazing Event?</h3>
    <p>Hey there! Here&#x27;s the latest demo presentation <a href="javascript:void(0);" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
  </div>
  <footer class="slds-post__footer">
    <ul class="slds-post__footer-actions-list slds-list--horizontal">
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Like this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
          </svg>Like</a>
      </li>
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Comment on this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share_post"></use>
          </svg> Comment</a>
      </li>
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Share this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
          </svg> Share</a>
      </li>
    </ul>
    <ul class="slds-post__footer-meta-list slds-list--horizontal slds-has-dividers--right slds-text-title">
      <li class="slds-item">20 shares</li>
      <li class="slds-item">259 views</li>
    </ul>
  </footer>
</article>

Post With AttachmentsPost With Attachments › LinkPost With Attachments › Files(s)Post With Attachmentsdev ready

Preview

Code

<article class="slds-post">
  <header class="slds-post__header slds-media">
    <div class="slds-media__figure">
      <a href="javascript:void(0);" title="Jason Rodgers" class="slds-avatar slds-avatar--circle slds-avatar--large">
        <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
      </a>
    </div>
    <div class="slds-media__body">
      <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
        <p><a href="javascript:void(0);" title="Jason Rodgers">Jason Rogers</a><a href="javascript:void(0);" title="Design Systems">Design Systems</a></p>
        <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true"
          title="More Options">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Options</span>
          </button>
      </div>
      <p class="slds-text-body--small"><a href="javascript:void(0);" title="Click for single-item view of this post" class="slds-text-link--reset">5 days Ago</a></p>
    </div>
  </header>
  <div class="slds-post__content slds-text-longform">
    <p>Hey there! Here&#x27;s the latest demo presentation <a href="javascript:void(0);" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
  </div>
  <div class="slds-post__payload">
    <a href="javascript:void(0);" class="slds-media slds-box slds-grow slds-text-link--reset">
      <div class="slds-media__figure slds-medium-show">
        <div class="slds-image slds-size--small">
          <div class="slds-image__crop slds-image__crop--16-by-9">
            <img src="/assets/images/placeholder-img@16x9.jpg" alt="Image Title" />
          </div>
        </div>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-text-heading--small">Maui By Air The Best Way Around The Island</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
        <span class="slds-text-body--small">Maui By Air The Best Way Around The Island</span>
      </div>
    </a>
  </div>
  <footer class="slds-post__footer">
    <ul class="slds-post__footer-actions-list slds-list--horizontal">
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Like this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
          </svg>Like</a>
      </li>
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Comment on this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share_post"></use>
          </svg> Comment</a>
      </li>
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Share this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
          </svg> Share</a>
      </li>
    </ul>
    <ul class="slds-post__footer-meta-list slds-list--horizontal slds-has-dividers--right slds-text-title">
      <li class="slds-item">20 shares</li>
      <li class="slds-item">259 views</li>
    </ul>
  </footer>
</article>

Post With CommentsPost With Comments › DefaultPost With Comments › Overflow BarPost With Comments › Publisher activePost With Commentsdev ready

Preview

Code

<article class="slds-post">
  <header class="slds-post__header slds-media">
    <div class="slds-media__figure">
      <a href="javascript:void(0);" title="Jason Rodgers" class="slds-avatar slds-avatar--circle slds-avatar--large">
        <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
      </a>
    </div>
    <div class="slds-media__body">
      <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
        <p><a href="javascript:void(0);" title="Jason Rodgers">Jason Rogers</a><a href="javascript:void(0);" title="Design Systems">Design Systems</a></p>
        <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true"
          title="More Options">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Options</span>
          </button>
      </div>
      <p class="slds-text-body--small"><a href="javascript:void(0);" title="Click for single-item view of this post" class="slds-text-link--reset">5 days Ago</a></p>
    </div>
  </header>
  <div class="slds-post__content slds-text-longform">
    <p>Hey there! Here&#x27;s the latest demo presentation <a href="javascript:void(0);" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
  </div>
  <footer class="slds-post__footer">
    <ul class="slds-post__footer-actions-list slds-list--horizontal">
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Like this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
          </svg>Like</a>
      </li>
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Comment on this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share_post"></use>
          </svg> Comment</a>
      </li>
      <li class="slds-col slds-item slds-m-right--medium">
        <a href="javascript:void(0);" title="Share this item" class="slds-post__footer-action">
          <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
          </svg> Share</a>
      </li>
    </ul>
    <ul class="slds-post__footer-meta-list slds-list--horizontal slds-has-dividers--right slds-text-title">
      <li class="slds-item">2 comments</li>
      <li class="slds-item">20 shares</li>
      <li class="slds-item">259 views</li>
    </ul>
  </footer>
</article>
<div class="slds-feed__item-comments">
  <ul>
    <li>
      <article class="slds-comment slds-media slds-hint-parent">
        <div class="slds-media__figure">
          <a href="javascript:void(0);" title="Jenna Davis" class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <img src="/assets/images/avatar2.jpg" alt="Jenna Davis" />
          </a>
        </div>
        <div class="slds-media__body">
          <header class="slds-media slds-media--center">
            <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
              <p class="slds-truncate"><a href="javascript:void(0);" title="Jenna Davis">Jenna Davis</a></p>
              <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true" title="More Options">
                <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More Options</span>
              </button>
            </div>
          </header>
          <div class="slds-comment__content slds-text-longform">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          <footer>
            <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
              <li class="slds-item"><a class="slds-text-color--weak" href="javascript:void(0);" title="Like this item">Like</a></li>
              <li class="slds-item">16hr Ago</li>
            </ul>
          </footer>
        </div>
      </article>
    </li>
    <li>
      <article class="slds-comment slds-media slds-hint-parent">
        <div class="slds-media__figure">
          <a href="javascript:void(0);" title="Jenna Davis" class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <img src="/assets/images/avatar2.jpg" alt="Jenna Davis" />
          </a>
        </div>
        <div class="slds-media__body">
          <header class="slds-media slds-media--center">
            <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
              <p class="slds-truncate"><a href="javascript:void(0);" title="Jenna Davis">Jenna Davis</a></p>
              <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true" title="More Options">
                <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More Options</span>
              </button>
            </div>
          </header>
          <div class="slds-comment__content slds-text-longform">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          <footer>
            <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
              <li class="slds-item"><a class="slds-text-color--weak" href="javascript:void(0);" title="Like this item">Like</a></li>
              <li class="slds-item">16hr Ago</li>
            </ul>
          </footer>
        </div>
      </article>
    </li>
  </ul>
  <div class="slds-media slds-comment slds-hint-parent">
    <div class="slds-media__figure">
      <a class="slds-avatar slds-avatar--circle slds-avatar--medium" href="javascript:void(0);" title="Jenna Davis">
        <img src="/assets/images/avatar2.jpg" alt="Jenna Davis" />
      </a>
    </div>
    <div class="slds-media__body">
      <div class="slds-publisher slds-publisher--comment">
        <label for="comment-text-input-01" class="slds-assistive-text">Write a comment</label>
        <textarea id="comment-text-input-01" class="slds-publisher__input slds-input--bare slds-text-longform" placeholder="Write a comment…"></textarea>
        <div class="slds-publisher__actions slds-grid slds-grid--align-spread">
          <ul class="slds-grid">
            <li>
              <button class="slds-button slds-button--icon-container" title="Add User">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#adduser"></use>
                </svg>
                <span class="slds-assistive-text">Add User</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button--icon-container" title="Attach a file">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#attach"></use>
                </svg>
                <span class="slds-assistive-text">Attach a file</span>
              </button>
            </li>
          </ul>
          <button class="slds-button slds-button--brand">Comment</button>
        </div>
      </div>
    </div>
  </div>
</div>

CommentComment › DefaultComment › LikeCommentdev ready

Preview

Code

<article class="slds-comment slds-media slds-hint-parent">
  <div class="slds-media__figure">
    <a href="javascript:void(0);" title="Jenna Davis" class="slds-avatar slds-avatar--circle slds-avatar--medium">
      <img src="/assets/images/avatar2.jpg" alt="Jenna Davis" />
    </a>
  </div>
  <div class="slds-media__body">
    <header class="slds-media slds-media--center">
      <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
        <p class="slds-truncate"><a href="javascript:void(0);" title="Jenna Davis">Jenna Davis</a></p>
        <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true" title="More Options">
          <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Options</span>
        </button>
      </div>
    </header>
    <div class="slds-comment__content slds-text-longform">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <footer>
      <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
        <li class="slds-item"><a class="slds-text-color--weak" href="javascript:void(0);" title="Like this item">Like</a></li>
        <li class="slds-item">16hr Ago</li>
      </ul>
    </footer>
  </div>
</article>

Feed ListFeed Listdev ready

Preview

Code

<div class="slds-feed">
  <ul class="slds-feed__list">
    <li class="slds-feed__item">
      <article class="slds-post">
        <header class="slds-post__header slds-media">
          <div class="slds-media__figure">
            <a href="javascript:void(0);" title="Jason Rodgers" class="slds-avatar slds-avatar--circle slds-avatar--large">
              <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
            </a>
          </div>
          <div class="slds-media__body">
            <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
              <p><a href="javascript:void(0);" title="Jason Rodgers">Jason Rogers</a><a href="javascript:void(0);" title="Design Systems">Design Systems</a></p>
              <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true"
                title="More Options">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More Options</span>
                </button>
            </div>
            <p class="slds-text-body--small"><a href="javascript:void(0);" title="Click for single-item view of this post" class="slds-text-link--reset">5 days Ago</a></p>
          </div>
        </header>
        <div class="slds-post__content slds-text-longform">
          <p>Hey there! Here&#x27;s the latest demo presentation <a href="javascript:void(0);" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
        </div>
        <footer class="slds-post__footer">
          <ul class="slds-post__footer-actions-list slds-list--horizontal">
            <li class="slds-col slds-item slds-m-right--medium">
              <a href="javascript:void(0);" title="Like this item" class="slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
                </svg>Like</a>
            </li>
            <li class="slds-col slds-item slds-m-right--medium">
              <a href="javascript:void(0);" title="Comment on this item" class="slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share_post"></use>
                </svg> Comment</a>
            </li>
            <li class="slds-col slds-item slds-m-right--medium">
              <a href="javascript:void(0);" title="Share this item" class="slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
                </svg> Share</a>
            </li>
          </ul>
          <ul class="slds-post__footer-meta-list slds-list--horizontal slds-has-dividers--right slds-text-title">
            <li class="slds-item">20 shares</li>
            <li class="slds-item">259 views</li>
          </ul>
        </footer>
      </article>
      <div class="slds-feed__item-comments">
        <div class="slds-p-horizontal--medium slds-p-vertical--x-small slds-grid"><a href="javascript:void(0);">More comments</a>
          <span class="slds-text-body--small slds-col--bump-left">1 of 8</span>
        </div>
        <ul>
          <li>
            <article class="slds-comment slds-media slds-hint-parent">
              <div class="slds-media__figure">
                <a href="javascript:void(0);" title="Jenna Davis" class="slds-avatar slds-avatar--circle slds-avatar--medium">
                  <img src="/assets/images/avatar2.jpg" alt="Jenna Davis" />
                </a>
              </div>
              <div class="slds-media__body">
                <header class="slds-media slds-media--center">
                  <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
                    <p class="slds-truncate"><a href="javascript:void(0);" title="Jenna Davis">Jenna Davis</a></p>
                    <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true" title="More Options">
                      <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                      </svg>
                      <span class="slds-assistive-text">More Options</span>
                    </button>
                  </div>
                </header>
                <div class="slds-comment__content slds-text-longform">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                <footer>
                  <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
                    <li class="slds-item"><a class="slds-text-color--weak" href="javascript:void(0);" title="Like this item">Like</a></li>
                    <li class="slds-item">16hr Ago</li>
                  </ul>
                </footer>
              </div>
            </article>
          </li>
        </ul>
      </div>
    </li>
    <li class="slds-feed__item">
      <article class="slds-post">
        <header class="slds-post__header slds-media">
          <div class="slds-media__figure">
            <a href="javascript:void(0);" title="Jason Rodgers" class="slds-avatar slds-avatar--circle slds-avatar--large">
              <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
            </a>
          </div>
          <div class="slds-media__body">
            <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
              <p><a href="javascript:void(0);" title="Jason Rodgers">Jason Rogers</a><a href="javascript:void(0);" title="Design Systems">Design Systems</a></p>
              <button class="slds-button slds-button--icon-border slds-button--icon-x-small" aria-haspopup="true"
                title="More Options">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More Options</span>
                </button>
            </div>
            <p class="slds-text-body--small"><a href="javascript:void(0);" title="Click for single-item view of this post" class="slds-text-link--reset">5 days Ago</a></p>
          </div>
        </header>
        <div class="slds-post__content slds-text-longform">
          <p>Hey there! Here&#x27;s the latest demo presentation <a href="javascript:void(0);" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
        </div>
        <footer class="slds-post__footer">
          <ul class="slds-post__footer-actions-list slds-list--horizontal">
            <li class="slds-col slds-item slds-m-right--medium">
              <a href="javascript:void(0);" title="Like this item" class="slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
                </svg>Like</a>
            </li>
            <li class="slds-col slds-item slds-m-right--medium">
              <a href="javascript:void(0);" title="Comment on this item" class="slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share_post"></use>
                </svg> Comment</a>
            </li>
            <li class="slds-col slds-item slds-m-right--medium">
              <a href="javascript:void(0);" title="Share this item" class="slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
                </svg> Share</a>
            </li>
          </ul>
          <ul class="slds-post__footer-meta-list slds-list--horizontal slds-has-dividers--right slds-text-title">
            <li class="slds-item">20 shares</li>
            <li class="slds-item">259 views</li>
          </ul>
        </footer>
      </article>
    </li>
  </ul>
</div>

A discussion feed consists of a list of posts. A .slds-feed__item contains a post and comments related to that post.

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-feed
Applied to:

<div>

Outcome:

Initializes feed

Required:

Required

Comments:

--

.slds-feed__list
Applied to:

<ul>

Outcome:

Initializes feed list

Required:

Required

Comments:

--

.slds-feed__item
Applied to:

<li>

Outcome:

Initializes feed list item

Required:

Required

Comments:

Applies padding and border separator

.slds-feed__item-comments
Applied to:

<div>

Outcome:

Container for feed item comments

Required:

Required

Comments:

Contains comment replies and publisher

.slds-post
Applied to:

<div> or <li>

Outcome:

Primary content in feed item

Required:

Required

Comments:

--

.slds-post--card
Applied to:

.slds-post

Outcome:

Styles for card look on a post

Required:

No, optional element or modifier

Comments:

--

.slds-post__header
Applied to:

<header>

Outcome:

Header region of a feed post

Required:

No, optional element or modifier

Comments:

--

.slds-post__content
Applied to:

<div>

Outcome:

Content region of a feed post

Required:

No, optional element or modifier

Comments:

--

.slds-post__footer
Applied to:

<footer>

Outcome:

Footer region of a feed post

Required:

No, optional element or modifier

Comments:

--

.slds-post__footer-actions-list
Applied to:

<div>

Outcome:

Footer region that contains quick action items for post

Required:

No, optional element or modifier

Comments:

--

.slds-post__footer-meta-list
Applied to:

<div>

Outcome:

Footer region that contains read only items for post

Required:

No, optional element or modifier

Comments:

--

.slds-post__footer-action
Applied to:

<a>

Outcome:

Action items within the feed post footer

Required:

No, optional element or modifier

Comments:

--

.slds-comment
Applied to:

<div>

Outcome:

Initializes comment

Required:

Required

Comments:

--

.slds-comment__content
Applied to:

<div>

Outcome:

Comment content goes in this element

Required:

Required

Comments:

.slds-comment__content needs the .slds-text-longform utility

.slds-comment__replies
Deprecated
Applied to:

<ul>

Outcome:

List of children comments

Required:

Required

Comments:

--

.slds-tags
Deprecated
Applied to:

<div>

Outcome:

Container for comment "tags" or "topics"

Required:

Required

Comments:

Required if comment has "tags" or "topics" associated

.slds-tags__list
Deprecated
Applied to:

<ul>

Outcome:

List for comment "tags" or "topics"

Required:

Required

Comments:

--

.slds-tags__item
Deprecated
Applied to:

<li>

Outcome:

Individual "tag" or "topic" item

Required:

Required

Comments:

--

.slds-attachments
Deprecated
Applied to:

<div>

Outcome:

Container for attachments to a comment

Required:

Required

Comments:

--

.slds-attachments__item
Deprecated
Applied to:

<div>

Outcome:

Individual attachment, can be more than one

Required:

Required

Comments:

--