Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
Component Blueprints
Feeds
A feed consists of a list of recurring elements of similar types. Examples of a feed would be a discussion feed.
- You liked this post
About Feeds#
Accessibility#
Most feeds have a media object containing the user's name and avatar image. If both the image and the name link to the same location, add tab-index="-1" to the <a> element so that assistive technology does not read out duplicate links.
Base#
Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
1 of 8
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">Post#
Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">Examples#
Link attachment#
Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">Files(s) attachment#
Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">With replies#
Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">Replies - Overflow Bar#
Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
1 of 8- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">Replies - Publisher active#
Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
1 of 8- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">Question#
Barbecue Party Tips For A Truly Amazing Event?
Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">States#
Like#
Hey there! Here's the latest demo presentation @Jenna Davis, let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.
You liked this post
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<article class="slds-post">Overview of CSS Classes#
| Selector | .slds-feed |
|---|---|
| Summary | A discussion feed consists of a list of posts. A |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-feed__list |
|---|---|
| Summary | |
| Restrict | .slds-feed ul |
| Selector | .slds-feed__item |
|---|---|
| Summary | |
| Restrict | .slds-feed__list li |
| Selector | .slds-feed__item-comments |
|---|---|
| Summary | Container for feed item comments |
| Restrict | .slds-feed__item div |
| Selector | .slds-post |
|---|---|
| Summary | |
| Support | dev-ready |
| Restrict | .slds-feed article |
| Variant | True |
| Selector | .slds-post__header |
|---|---|
| Summary | Header region of a feed post |
| Restrict | .slds-post header |
| Selector | .slds-post__content |
|---|---|
| Summary | Content region of a feed post |
| Restrict | .slds-post div |
| Selector | .slds-post__footer |
|---|---|
| Summary | Footer region of a feed post |
| Restrict | .slds-post footer |
| Selector | .slds-post__footer-actions-list |
|---|---|
| Summary | Footer region that contains quick action items for post |
| Restrict | .slds-post__footer ul |
| Selector | .slds-post__footer-action |
|---|---|
| Summary | Action items within the feed post footer |
| Restrict | .slds-post__footer-actions-list button |
| Selector | .slds-is-active |
|---|---|
| Summary | Active state for like button |
| Restrict | .slds-post__footer-action |
| Modifier | True |
| Selector | .slds-post__footer-meta-list |
|---|---|
| Summary | Footer region that contains read only items for post |
| Restrict | .slds-post__footer ul |
Feeds Release Notes
2.7.0
Changed
- Replaced spacing tokens with variable spacing tokens to respond to a user's densification setting