Social Feeds

What is a social feed layout?

A social feed layout displays posts the way social networks do: a post card with avatar, name and timestamp, text and images, reactions, comments and share buttons, arranged in a timeline or masonry grid. These social media UI components are used for community features, testimonial walls, embedded brand feeds, intranet news streams and app prototypes.

When to use social post cards

Use them when you want to show user-generated or social content in a familiar format, or when you are building your own community or feed feature. They are front-end layouts; you connect them to your own data or a platform API.

Best practices for a responsive social feed:

• Wrap each post in an <article> and use a <time datetime="..."> element for timestamps.
• Give avatars and post images useful alt text, or empty alt="" when they are purely decorative next to a visible name.
• Make like and bookmark buttons real <button> elements with aria-pressed, and include counts in the accessible name.
• Avoid infinite scroll without an alternative; a "load more" button keeps the footer reachable and is easier for keyboard users.
• Lazy-load images and reserve their size to prevent layout shift.
• Keep action icons at a comfortable touch size and add text labels or tooltips.
• Sanitize and escape any user content you render.

Bootstrap, Tailwind CSS and pure CSS social feeds

Every social feed has a live preview and code tabs for HTML, CSS and JS where needed. Bootstrap 6 versions use the new alpha ES module build and theme-* colour roles for consistent light and dark styling. Bootstrap 5 versions use cards and list groups, Tailwind CSS versions use utility classes, and pure CSS versions show the layout with plain CSS grid and flexbox. Pick your framework with the filter, copy or download the code and connect it to your posts.