Card
Card is a component that displays grouped content and actions on a single topic. It provides an entry point to more detailed information.
Parameters
Typically the title of the page you are linking to.
Modifier to be applied to the layout of the card.
A small text label typically used to show categorization or attribution.
Addition content to display on the card, such as an icon, badge, or commercial message.
An optional subtitle to provide additional context or information.
Text area for preview, descriptive of the other short text.
The variant of the card, affecting its visual style.
The size of the title, which can be either large or extra large.
The theme of the card, which define its colors and overall appearance.
The media container which can contains Image, VideoPlayer and ShoppableImage
The source of interactions for the card, such as hover or focus events.
Represents the content to be displayed in the footer of the Card.
Lambda to be invoked when the card is clicked.
See also
Samples
val title = "The importance of ergonomic furniture"
val body =
"Having an office in your home can be great for boosting productivity, giving you a place to concentrate away from workplace distractions."
val caption = "Office"
val ctaLabel = "Read more"
val context = LocalContext.current
SkapaTheme2(isSystemInDarkTheme()) {
Column(
verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space150),
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(horizontal = SkapaSpacing.space100)
.verticalScroll(rememberScrollState())
) {
Card(title = title, titleSize = CardTitleSize.HeadingL) {
Toast
.makeText(context, "Card 1", Toast.LENGTH_SHORT)
.show()
}
Spacer(modifier = Modifier.height(SkapaSpacing.space75))
Card(title = title, variant = CardVariant.Simple) {
Toast
.makeText(context, "Card 2", Toast.LENGTH_SHORT)
.show()
}
Spacer(modifier = Modifier.height(SkapaSpacing.space75))
Card(
title = title,
label = caption,
subTitle = "Subtitle",
body = body,
addon = CardAddon.Icon(icon = R.drawable.ic_inline_message_informative),
cardFooterContent = CardFooterContent.SecondaryButton(buttonLabel = ctaLabel, contentDescription = "button")
) {
Toast
.makeText(context, "Card 3", Toast.LENGTH_SHORT)
.show()
}
}
}