Left Liquid Background
Right Liquid Background

Social Media Card

The Social Media Card preset provides a modular content block for displaying user profiles, posts, or activity snippets. Designed for engagement-driven UIs, it supports avatars, metadata, and action buttons to replicate modern social feed interactions.

Quick Links

Installation

Install the presets individually or as part of the complete @aristobyte-ui library.

Installation of Social Media Card

Install the Social Media Card preset individually using the command above. You may skip this step if @aristobyte-ui is already installed globally.

Package Manager

Individual Package

Install only the presets if you need specific functionality.

Full Library

Skip this if you have the complete @aristobyte-ui already installed.

Import

Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.

Import Social Media Card

Import the Social Media Card from the AristoByte UI package to rapidly integrate feed-like layouts into your application. Its composable design allows easy extension with comments, likes, and sharing controls.

Import Method

;

Individual Package

Import directly from the presets package for optimal tree-shaking and smaller bundle sizes.

Recommended for component-specific usage

Global Library

Import from the main library package when using multiple components from AristoByte UI.

Recommended for component-specific usage

Basic Usage Example

Basic implementation of the component using default properties. Suitable for general-purpose interactions.

Disabled

Demonstrates the SocialMediaCard in a disabled state. Interactions such as the action button are inactive, preventing any user actions.

Preview

Guidelines

    Operational Context

  • Disable interactive affordances when user actions are blocked by account status or rate-limits.

  • Use disabled state while remote content (comments/likes) is syncing to avoid inconsistent counts.

  • Suppress share/like CTA when privacy or consent flags are unresolved for the content owner.

  • Temporarily disable actions during moderation or content review windows to prevent premature engagement.

    UX & Developer Notes

  • Render explanatory microcopy or tooltip to communicate why actions are disabled.

  • Keep visible metadata (likes, timestamp) readable even when interactive controls are disabled.

  • Provide a programmatic reason code (data-disabled-reason) for telemetry and automated tests.

  • Ensure disabled styling is keyboard- and screen-reader-friendly; maintain semantic DOM order.

Props Reference

Complete reference for all props available on SocialMediaCard component(s), including type definitions, default values, and usage examples.

  • SocialMediaCard

    • Core Props

      • children

        React.ReactNode | stringdefault: ''

Viewing Unit with ID social-media-card