Skip to main content
Version: 12.10.0

infocard

OCInformationCardView - A Custom Composable UI Component

The OCInformationCardView composable is a customizable card view for displaying information. It can include a title, description, caption, button, and icons. The appearance of the card can be customized using different background colors and icon sizes.

CardBackground Color Options(Optional):

  • CardInfoCardBackgroundBlue
  • CardInfoCardBackgroundGreen
  • CardInfoCardBackgroundSand
  • CardInfoCardBackgroundRed

Features

  • User can pass the desired information to show like title, description, caption.
  • In onClick mathod, user can defined their click action for button
  • In largeIconComposable and smallIconComposable you can pass Image, CoilImage, GlideImage, Icon etc.

How to use OCInformationCardView

  1. Add the necessary imports:

    import your.package.name.OCInformationCardView

  2. Use the OCInformationCardView within your Composable:

OCInformationCardView with small icon

        OCInformationCardView(
title = "Title",
caption = "Bold Caption",
description = "Description",
smallIconComposable = {
Icon(
painter = painterResource(id = R.drawable.error_icon),
contentDescription = "Small icon description",
tint = OCColors.cardInfoCardOnBackgroundDefault,
modifier = Modifier.clearAndSetSemantics {
contentDescription = "Small icon description"
}
)
},
buttonText = "Button",
onClick = {}
)

OCInformationCardView with large icon

                OCInformationCardView(
title = "Title",
caption = "Bold Caption",
description = "Description",
cardBackgroundColor = CardInfoCardBackgroundBlue,
subCaptionsList = arrayListOf(
OCCaptionsListModel(caption = "Caption 1"),
OCCaptionsListModel(caption = "Caption 2"),
OCCaptionsListModel(caption = "Caption 3"),
OCCaptionsListModel(caption = "Caption 4")),
largeIconComposable = {
Image(
painter = painterResource(id = R.drawable.infocard_placeholder),
contentDescription = "Large icon description",
contentScale = ContentScale.None,
colorFilter = ColorFilter.tint(OCColors.cardInfoCardOnBackgroundDefault),
modifier = Modifier.clearAndSetSemantics {
contentDescription = "Large icon description"
}
)
},
buttonText = "Button",
onClick = {}
)

Parameters:

  • title : Title of the information
  • description : Description of the information
  • caption : Caption of the information
  • subCaptionsList : Captions list of the information
  • buttonText : Text for the button in infocard
  • largeIconComposable : Large icon to show in infocard
  • smallIconComposable : Small icon to show in infocard
  • onClick: Listener that observes click event of the button.
  • cardBackgroundColor: To set the background color of card.
  • descriptionMaxLineCount: To set the description line count.
  • captionLineCount: To set the caption line count.