Card

Default

Day	Night

Divided Card

Day	Night

Card Wrapper

Day	Night

Installation

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

Usage

Example of a Card with default (small) corner:

                                                
                                                import net.skyscanner.backpack.compose.card.BpkCard
                                                
                                                BpkCard {
                                                    // content
                                                }

Example of a Card with large corner:

                                                
                                                import net.skyscanner.backpack.compose.card.BpkCard
                                                import net.skyscanner.backpack.compose.card.BpkCardCorner
                                                
                                                BpkCard(corner = BpkCardCorner.Large) {
                                                    // content
                                                }

Example of a Card with no padding:

                                                
                                                import net.skyscanner.backpack.compose.card.BpkCard
                                                import net.skyscanner.backpack.compose.card.BpkCardPadding
                                                
                                                BpkCard(padding = BpkCardPadding.None) {
                                                    // content
                                                }

Example of a clickable Card:

                                                
                                                import net.skyscanner.backpack.compose.card.BpkCard
                                                
                                                BpkCard(
                                                  onClick = {},
                                                  onClickLabel = "Semantic and accessibility label",
                                                ) {
                                                    // content
                                                }

Example of a focused Card:

                                                
                                                import net.skyscanner.backpack.compose.card.BpkCard
                                                import net.skyscanner.backpack.compose.card.BpkCardElevation
                                                
                                                BpkCard(elevation = BpkCardElevation.Focus) {
                                                    // content
                                                }

Example of a Divided Card:

                                                
                                                import net.skyscanner.backpack.compose.dividedcard.BpkDividedCard
                                                import net.skyscanner.backpack.compose.dividedcard.dividedCardWidth
                                                
                                                BpkDividedCard(
                                                  modifier = Modifier.fillMaxWidth(),
                                                  primaryContent = {
                                                    Image(
                                                      modifier = Modifier
                                                        .height(BpkSpacing.Xxl * 2)
                                                        .dividedCardWidth(BpkSpacing.Xxl),
                                                      painter = painterResource(id = R.drawable.image),
                                                      contentDescription = "content description",
                                                      contentScale = ContentScale.Crop
                                                    )
                                                  },
                                                  secondaryContent = {
                                                    BpkText(
                                                      modifier = Modifier.fillMaxWidth(),
                                                      text = stringResource("BpkDividedCard sample"),
                                                    )
                                                  },
                                                  onClick = {}
                                                )

Example of a Card Wrapper:

                                                
                                                import net.skyscanner.backpack.compose.cardwrapper.BpkCardWrapper
                                                import net.skyscanner.backpack.compose.card.BpkCardElevation
                                                import net.skyscanner.backpack.compose.card.BpkCardPadding
                                                import net.skyscanner.backpack.compose.card.BpkCardCorner
                                                
                                                BpkCardWrapper(
                                                  modifier = Modifier.fillMaxWidth(),
                                                  backgroundColor = BpkTheme.colors.coreEco,
                                                  cardPadding = BpkCardPadding.None,
                                                  corner = BpkCardCorner.Large,
                                                  elevation = BpkCardElevation.Focus,
                                                  headerContent = {
                                                    // header content
                                                  },
                                                  cardContent = {
                                                    // card content
                                                  },
                                                  onClick = {}
                                                )