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

CardRegular

@Composable
fun CardRegular(title: String, modifier: Modifier = Modifier, size: CardTextSize = CardTextSize.Regular, body: String? = null, label: String? = null, imageParams: ImageParams? = null, ctaLabel: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Deprecated

CardRegular is deprecated and will be removed shortly. Use the new cards, information can be found here: https://skapa.ikea.net/components/content-and-containers/card/.

Card Regular is a background-less Card that blends passively into the page.

This component provides a preview and an entry point to more detailed information.

The Card can contain and combine Image, Headline, Description, Subtitle, CTA Link and Customisable background color. Combinations may vary depending on context.

Parameters

title

The card title. Typically the title of the page you are linking to.

modifier

Modifier to be applied to the Card

size

Comes in 2 sizes for use in different areas of hierarchy.

body

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

label

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

imageParams

Image parameters for card header.

ctaLabel

Text label property for a button instead of the arrow icon.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this Component.

onClick

will be called when the user clicks on the card

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.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.CardButtonVariant
import net.ikea.skapa.ui.components.CardEmphasised
import net.ikea.skapa.ui.components.CardRegular

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

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

        CardEmphasised(
            title = title,
            modifier = Modifier
                .width(350.dp)
                .heightIn(min = 350.dp),
            body = body,
            label = caption,
            ctaAction = ctaLabel,
            roundedCorners = true,
            backgroundColor = SkapaTheme.colors.elevation2,
            elevation = true
        ) {
            Toast.makeText(context, "Card 3", Toast.LENGTH_SHORT).show()
        }
        CardEmphasised(
            title = title,
            modifier = Modifier.width(350.dp),
            body = body,
            label = caption,
            ctaAction = ctaLabel,
            roundedCorners = true,
            contentColor = SkapaTheme.colors.staticWhite,
            backgroundColor = SkapaTheme.colors.staticIKEABrandBlue,
            buttonVariant = CardButtonVariant.PrimaryInverse
        ) {
            Toast.makeText(context, "Card 3", Toast.LENGTH_SHORT).show()
        }
    }
} 
   //sampleEnd
}
@Composable
fun CardRegular(title: String, modifier: Modifier = Modifier, size: CardTextSize = CardTextSize.Regular, body: String? = null, label: String? = null, image: Painter? = null, imageContentDescription: String? = null, ctaLabel: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Deprecated

CardRegular is deprecated and will be removed shortly. Use the new cards, information can be found here: https://skapa.ikea.net/components/content-and-containers/card/.

Deprecated Regular Card.

Use ImageParams instead of 'image' and 'imageContentDescription' with the new function.

Parameters

title

The card title. Typically the title of the page you are linking to.

modifier

Modifier to be applied to the Card

size

Comes in 2 sizes for use in different areas of hierarchy.

body

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

label

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

image

Image to be displayed in the Card.

imageContentDescription

Text used by accessibility services to describe what this image represents.

ctaLabel

Text label property for a button instead of the arrow icon.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this Component.

onClick

will be called when the user clicks on the card

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.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.CardButtonVariant
import net.ikea.skapa.ui.components.CardEmphasised
import net.ikea.skapa.ui.components.CardRegular

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

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

        CardEmphasised(
            title = title,
            modifier = Modifier
                .width(350.dp)
                .heightIn(min = 350.dp),
            body = body,
            label = caption,
            ctaAction = ctaLabel,
            roundedCorners = true,
            backgroundColor = SkapaTheme.colors.elevation2,
            elevation = true
        ) {
            Toast.makeText(context, "Card 3", Toast.LENGTH_SHORT).show()
        }
        CardEmphasised(
            title = title,
            modifier = Modifier.width(350.dp),
            body = body,
            label = caption,
            ctaAction = ctaLabel,
            roundedCorners = true,
            contentColor = SkapaTheme.colors.staticWhite,
            backgroundColor = SkapaTheme.colors.staticIKEABrandBlue,
            buttonVariant = CardButtonVariant.PrimaryInverse
        ) {
            Toast.makeText(context, "Card 3", Toast.LENGTH_SHORT).show()
        }
    }
} 
   //sampleEnd
}