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.
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()
}
Spacer(modifier = Modifier.height(SkapaSpacing.space75))
Card(
title = title,
label = caption,
subTitle = "Horizontal layout",
body = body,
orientation = CardOrientation.Horizontal(),
mediaContainer = MediaContainer.Image(
painter = painterResource(id = R.drawable.ic_avatar_person),
contentDescription = null,
// Note: media container will match the height of the card, and base the width of the image on the provided aspect ratio.
aspectRatio = SkapaAspectRatio.Ratio1by1
),
cardFooterContent = CardFooterContent.SecondaryButton(buttonLabel = ctaLabel, contentDescription = "button")
) {
Toast.makeText(context, "Card 4", Toast.LENGTH_SHORT).show()
}
Spacer(modifier = Modifier.height(SkapaSpacing.space75))
Card(
title = title,
label = caption,
subTitle = "Horizontal layout - custom media",
body = body,
modifier = Modifier, // Set a specific card size through modifier if needed
addon = CardAddon.CommercialMessage(message = "New", type = CommercialMessageType.New),
mediaContainer = MediaContainer.Custom(
modifier = Modifier.widthIn(min = 0.dp) // important: allow shrinking
) {
// Example code on how to make the media container adapt to the available space
// while still trying to be as large as possible (up to a defined max size).
BoxWithConstraints {
val preferredSquareSize = 350.dp
val maxShareOfRow = maxWidth * 0.40f
val mediaWidth = preferredSquareSize.coerceAtMost(maxShareOfRow)
Image(
painter = painterResource(id = R.drawable.ic_avatar_person),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.widthIn(max = mediaWidth)
)
}
},
titleSize = CardTitleSize.HeadingL,
cardFooterContent = null,
orientation = CardOrientation.Horizontal(alignment = CardContentVerticalAlignment.Center),
cardTheme = CardTheme.Default
) {
Toast.makeText(context, "Card 5", Toast.LENGTH_SHORT).show()
}
}
}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.
Additional 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.
The theme of the card, which define its colors and overall appearance.
The media container which can contain 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.
The orientation of the card media and content layout. Can be either horizontal or vertical.
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()
}
Spacer(modifier = Modifier.height(SkapaSpacing.space75))
Card(
title = title,
label = caption,
subTitle = "Horizontal layout",
body = body,
orientation = CardOrientation.Horizontal(),
mediaContainer = MediaContainer.Image(
painter = painterResource(id = R.drawable.ic_avatar_person),
contentDescription = null,
// Note: media container will match the height of the card, and base the width of the image on the provided aspect ratio.
aspectRatio = SkapaAspectRatio.Ratio1by1
),
cardFooterContent = CardFooterContent.SecondaryButton(buttonLabel = ctaLabel, contentDescription = "button")
) {
Toast.makeText(context, "Card 4", Toast.LENGTH_SHORT).show()
}
Spacer(modifier = Modifier.height(SkapaSpacing.space75))
Card(
title = title,
label = caption,
subTitle = "Horizontal layout - custom media",
body = body,
modifier = Modifier, // Set a specific card size through modifier if needed
addon = CardAddon.CommercialMessage(message = "New", type = CommercialMessageType.New),
mediaContainer = MediaContainer.Custom(
modifier = Modifier.widthIn(min = 0.dp) // important: allow shrinking
) {
// Example code on how to make the media container adapt to the available space
// while still trying to be as large as possible (up to a defined max size).
BoxWithConstraints {
val preferredSquareSize = 350.dp
val maxShareOfRow = maxWidth * 0.40f
val mediaWidth = preferredSquareSize.coerceAtMost(maxShareOfRow)
Image(
painter = painterResource(id = R.drawable.ic_avatar_person),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.widthIn(max = mediaWidth)
)
}
},
titleSize = CardTitleSize.HeadingL,
cardFooterContent = null,
orientation = CardOrientation.Horizontal(alignment = CardContentVerticalAlignment.Center),
cardTheme = CardTheme.Default
) {
Toast.makeText(context, "Card 5", Toast.LENGTH_SHORT).show()
}
}
}