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

CompactCard

@Composable
fun CompactCard(title: String, compactMediaContainer: CompactMediaContainer, modifier: Modifier = Modifier, label: String? = null, addon: CompactCardAddon = CompactCardAddon.None, variant: CompactCardVariant = CompactCardVariant.Regular, compactCardTheme: CompactCardTheme? = null, showArrow: Boolean = true, titleSize: TitleSize = TitleSize.Regular, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Compact Card is a component that displays simple content and an entry point to other pages for more detailed information.

Parameters

title

Typically the title of the page you are linking to.

compactMediaContainer

The media container which can contains Image or Video.

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 a badge, or commercial message (can be used only on Image).

variant

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

compactCardTheme

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

showArrow

Toggle on/off arrow in the footer.

titleSize

The size of the title which can be TitleSize.Regular or TitleSize.XSmall.

interactionSource

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

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.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.CompactCard
import net.ikea.skapa.ui.components.CompactCardVariant
import net.ikea.skapa.ui.components.CompactMediaContainer

fun main() { 
   //sampleStart 
   val title = "Title"
val label = "Label"
val painter = painterResource(R.drawable.avatar_demo_image)
val context = LocalContext.current

SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space150),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .padding(horizontal = SkapaSpacing.space100)
            .verticalScroll(rememberScrollState())
    ) {
        CompactCard(
            title = title,
            compactMediaContainer = CompactMediaContainer.Image(painter = painter, contentDescription = "Avatar image with dog"),
            label = label
        ) {
            Toast
                .makeText(context, "Avatar CompactCard", Toast.LENGTH_SHORT)
                .show()
        }

        Spacer(modifier = Modifier.height(SkapaSpacing.space150))

        CompactCard(
            title = title,
            compactMediaContainer = CompactMediaContainer.Image(painter = painter, contentDescription = "Avatar image with dog"),
            label = label,
            variant = CompactCardVariant.Simple
        ) {
            Toast
                .makeText(context, "Avatar CompactCard", Toast.LENGTH_SHORT)
                .show()
        }
    }
} 
   //sampleEnd
}