Design/net.ikea.skapa.ui.components/Card

Card

@Composable
fun Card(title: String, modifier: Modifier = Modifier, label: String? = null, addon: CardAddon = CardAddon.None, subTitle: String? = null, body: String? = null, variant: CardV2Variant = CardV2Variant.Regular, titleSize: CardV2TitleSize = CardV2TitleSize.HeadingXl, cardTheme: CardTheme? = CardTheme.Default, mediaContainer: MediaContainer? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, cardFooterContent: CardFooterContent? = null, onClick: () -> Unit)

Card 2.0 is a component that displays grouped content and actions on a single topic. It provides an entry point to more detailed information.

Parameters

title

Typically the title of the page you are linking to.

modifier

Modifier to be applied to the layout of the card.

label

A small text label typically used to show categorization or attribution.

addon

Addition content to display on the card, such as an icon, badge, or commercial message.

subTitle

An optional subtitle to provide additional context or information.

body

Text area for preview, descriptive of the other short text.

variant

The variant of the card, affecting it's visual style.

titleSize

The size of the title, which can be either large or extra large.

cardTheme

The theme of the card, which define it's colors and overall appearance.

mediaContainer

The media container which can contains Image, VideoPlayer and ShoppableImage

interactionSource

The source of interactions for the card, such as hover or focus events.

cardFooterContent

Represents the content to be displayed in the footer of the Card.

onClick

Lambda to be invoked when the card is clicked.

See also

Samples

import android.content.res.Configuration
import android.widget.Toast
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Card
import net.ikea.skapa.ui.components.CardAddon
import net.ikea.skapa.ui.components.CardFooterContent
import net.ikea.skapa.ui.components.CardV2TitleSize
import net.ikea.skapa.ui.components.CardV2Variant

fun main() { 
   //sampleStart 
   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

SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space150),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .padding(horizontal = SkapaSpacing.space100)
            .verticalScroll(rememberScrollState())
    ) {
        Card(title = title, titleSize = CardV2TitleSize.HeadingL) {
            Toast
                .makeText(context, "Card 1", Toast.LENGTH_SHORT)
                .show()
        }
        Spacer(modifier = Modifier.height(SkapaSpacing.space75))

        Card(title = title, variant = CardV2Variant.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()
        }
    }
} 
   //sampleEnd
}