Menu

Feed
A feed presents user activity chronologically

Types

Feed

A feed

Elliot Fu added you as a friend
1 Hour Ago
Jenny Hess added you as a friend
2 Days Ago
Joe Henderson posted on his page
3 days ago
Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another day soon.
Justen Kitsune added 2 new photos of you
4 days ago

Content

Label

An event label can contain an image, icon, text or label

You added Elliot Fu to the group Coworkers
You posted on your friend Stevie Feliciano's wall.
Today
Longer label text can use the multiline class
NEW
Check the latest sales offers
THIS FALL
Only in selected theaters!
OK
Deployment was successful

Using a data-text attribute for the label will automatically create a round label containing the given value

You can also add a color class. Also add basic for a variant without background color.
Run, Forrest, run!
Don't move!
Nap time

Date

An event or an event summary can contain a date

3 days ago
You added Jenny Hess to your coworker group.
You added Jenny Hess to your coworker group.
3 days ago

Additional information

An event can contain additional information like a set of images or text

You could add right floated to feed content elements to make them appear to the right of the content block
3 days ago
Helen Troy added 2 photos
3 days ago
Laura Faucet created a post
Have you seen what's going on in Israel? Can you believe it.

States

Variations

Connected

Feed events can be connected to visualize a linear timeline

You can add a color class like ui blue connected feed to get the connection line colored accordingly
Elliot Fu added you as a friend
1 Hour Ago
You submitted a new post to the page
3 days ago
I'm having a BBQ this weekend. Come by around 4pm if you can.

Ordered

Ordered feeds will automatically create ordered label content for the event. You can again combine this using a color class for the whole feed or each label individually. Also a basic variant is available.

When used in combination with connected the connection line gets the feed color. If you want the connection line color being different than each event color, you have to define the colors for each event individually
Different Labels color than whole feed color
Automatic label content, line color taken from event color
Content via data-text attribute
Basic Label

Divided

Feed events can be divided to better distinguish between grouped content

Elliot Fu added Jenny Hess as a friend
Stevie Feliciano added Elliot Fu as a friend
Helen Troy added Christian Rocha as a friend
Christian Rocha signed up for the site.

Size

A feed can have different sizes

Followers Activity

Elliot Fu added Jenny Hess as a friend
Stevie Feliciano added Elliot Fu as a friend
Helen Troy added Christian Rocha as a friend
Christian Rocha signed up for the site.
Elliot Fu added you as a friend
1 Hour Ago
You submitted a new post to the page
3 days ago
I'm having a BBQ this weekend. Come by around 4pm if you can.

Inverted

A feed's color can be inverted

Just now
Elliot Fu posted on his page
Hey there !
Elliot Fu added you as a friend
1 Hour Ago
Jenny Hess added you as a friend
2 Days Ago
Joe Henderson posted on his page
3 days ago
Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another day soon.
Justen Kitsune added 2 new photos of you
4 days ago

Dimmer Message
Dimmer sub-header