Inset Banner

A banner to nest into Cards to allow them stand out.

InsetBanner

OnLight

Day	Night

OnDark

Day	Night

Without Title and SubHeadline

Day	Night

Without Logo

Day	Night

Without Call To Action (CTA)

Day	Night

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a InsetBanner:

import net.skyscanner.backpack.compose.insetbanner.BpkInsetBanner
import net.skyscanner.backpack.compose.insetbanner.BpkInsetBannerCTA
import net.skyscanner.backpack.compose.insetbanner.BpkInsetBannerVariant

{
    BpkInsetBanner(
        variant = BpkInsetBannerVariant.OnLight,
        title = title,
        subHeadline = subHeadline,
        callToAction = BpkInsetBannerCTA(
            ctaText,
            ctaAccessibilityLabel,
        ),
        body = body,
    ) {
        Image(
            painter = painterResource(R.drawable.inset_banner_skyland_white),
            contentDescription = contentDescription,
            contentScale = ContentScale.Fit,
        )
    }
}

Note: The Inset Banner is clickable/expandable if a body text is provided.