List & Media
List groups, media objects, and content list patterns.
Basic List
Simple list group with items.
Linked Items
Interactive list items with active state.
List with Badges
Items with count badges on the right.
Disabled Items
Items with disabled state.
Colored Items
Contextual colored list items.
Custom Content List
Rich list items with headings, text, and timestamps.
Project Update
3 days agoThe new dashboard design has been finalized and sent for review.
Team Meeting
5 days agoWeekly sync scheduled for Friday at 2pm. Please prepare status updates.
Bug Report #142
1 week agoLogin redirect issue has been resolved and deployed to staging.
Tabbed List
List groups with tab-like behavior.
Welcome to the home tab. This is the main content area that updates based on your list selection.
Media Object
Image paired with text content.
John Doe
This is a standard media object with an avatar on the left and text content flowing beside it.
Alice Smith
Media objects are great for comments, testimonials, and user activity feeds.
Nested Media
Media objects containing nested media.
John Doe
This is a parent comment that contains a nested reply below.
Alice Smith
This is a nested reply to the parent comment above.
Media Alignment
Aligning media to top, center, or bottom.
Top Aligned
This media object demonstrates top aligned positioning. The avatar aligns to the top of the text content.
Center Aligned
This media object demonstrates center aligned positioning. The avatar aligns to the center of the text content.
Bottom Aligned
This media object demonstrates bottom aligned positioning. The avatar aligns to the bottom of the text content.
Media List
Multiple stacked media items in a feed layout.
Mark Kim
2m agoJust deployed the new feature to production.
Sara Jones
15m agoReviewed the PR — looks good! Left a few minor comments.
Tom Brown
1h agoCreated a new branch for the authentication refactor.
Lisa Park
3h agoUpdated the design system documentation with the new tokens.