AepUIStyle

Class that encapsulates the style configuration for all supported types of Experience Platform UI content content card components. This class is used when displaying content cards within the inbox to apply consistent styling across different card types.

Public Properties

Property
Type
Description
smallImageUIStyle
SmallImageUIStyle
The style configuration for small image content cards.
largeImageUIStyle
LargeImageUIStyle
The style configuration for large image content cards.
imageOnlyUIStyle
ImageOnlyUIStyle
The style configuration for image-only content cards.

Class Definition

data-slots=heading, code

data-repeat=1

data-languages=Kotlin

Kotlin

class AepUIStyle(
    val smallImageUIStyle: SmallImageUIStyle = SmallImageUIStyle.Builder().build(),
    val largeImageUIStyle: LargeImageUIStyle = LargeImageUIStyle.Builder().build(),
    val imageOnlyUIStyle: ImageOnlyUIStyle = ImageOnlyUIStyle.Builder().build()
)

Usage

The AepUIStyle is used to customize the appearance of individual content cards within the inbox. Each property controls the styling for a specific card template type.

Basic Usage

data-slots=heading, code

data-repeat=1

data-languages=Kotlin

Kotlin

// Use default styles for all card types
val cardStyle = AepUIStyle()

AepInbox(
    uiState = inboxUIState,
    itemsStyle = cardStyle,
    observer = observer
)

Custom Styling

data-slots=heading, code

data-repeat=1

data-languages=Kotlin

Kotlin

// Customize styles for each card type
val smallImageStyle = SmallImageUIStyle.Builder()
    .cardStyle(AepCardStyle(
        modifier = Modifier.fillMaxWidth().padding(8.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ))
    .titleAepTextStyle(AepTextStyle(
        textStyle = TextStyle(
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp
        )
    ))
    .build()

val largeImageStyle = LargeImageUIStyle.Builder()
    .cardStyle(AepCardStyle(
        modifier = Modifier.fillMaxWidth().padding(8.dp)
    ))
    .imageStyle(AepImageStyle(
        contentScale = ContentScale.Crop
    ))
    .build()

val imageOnlyStyle = ImageOnlyUIStyle.Builder()
    .cardStyle(AepCardStyle(
        modifier = Modifier.fillMaxWidth().padding(8.dp)
    ))
    .imageStyle(AepImageStyle(
        modifier = Modifier.fillMaxSize()
    ))
    .build()

val cardStyle = AepUIStyle(
    smallImageUIStyle = smallImageStyle,
    largeImageUIStyle = largeImageStyle,
    imageOnlyUIStyle = imageOnlyStyle
)

AepInbox(
    uiState = inboxUIState,
    itemsStyle = cardStyle,
    observer = observer
)

Styling Specific Card Types

If your inbox only contains specific card types, you can customize only those styles:

data-slots=heading, code

data-repeat=1

data-languages=Kotlin

Kotlin

// Only customize small image cards, use defaults for others
val cardStyle = AepUIStyle(
    smallImageUIStyle = SmallImageUIStyle.Builder()
        .cardStyle(AepCardStyle(
            colors = CardDefaults.cardColors(
                containerColor = Color(0xFFF5F5F5)
            )
        ))
        .build()
)