MUIBlog Card

A blog card by ModularUI with a title, description, image, date, circular avatars, and optional "More" button.

Properties

  • title: String - Title of the Blog Card.

  • titleStyle: TextStyle - Text style for the title, default: TextStyle(fontSize: 24, fontWeight: FontWeight.bold).

  • description: String - Description text of the Blog Card.

  • descriptionStyle: TextStyle - Text style for the description, default: TextStyle(fontSize: 16, color: Colors.grey).

  • onBlogCardPressed: VoidCallback - Callback function when the Blog Card is tapped.

  • image: Image - Image to be displayed on the Blog Card.

  • date: String - Date text of the Blog Card.

  • avatarRad: double - Radius of circular avatars, default: 16.

  • onMoreTap: VoidCallback - Callback function when the "More" button is tapped.

  • moreButtonStyle: ButtonStyle - Style for the "More" button.

  • bgColor: Color - Background color of the card, default: Colors.white.

  • elevation: double - Elevation of the card.

  • avatarSpacing: double - Spacing between circular avatars.

  • aspectRatio: double - Aspect ratio of the image, default: 16 / 9.

  • maxWidth: double - Maximum width of the card, default: 430. Responsive to screen size.

  • circularAvatarImages: List - List of image links for circular avatars.

Example Usage

Blog Card

Notes

  • The card provides an elegant way to display blog information with an image, date, and circular avatars.

  • Customize appearance and layout using various properties.

  • "More" button can be added for additional actions

Last updated