Available from v7.1.0

BB.Card

BB.Card is a SwiftUI container view that displays content in a card-like format with a background color, shadow, and rounded corners.

Platform availability: iOS 17.0+

When to use:

• Use BB.Card when grouping related content visually, such as account summaries, transaction details, or feature sections.
• Consider using plain containers when visual separation is not needed or when content already has its own boundaries.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        import SwiftUI
                                                        
                                                            

Visual reference

API reference

BB.Card

Initializers

init(content:)

Initializes a new card instance with the provided content.

Configuration

The BB.Card component uses a builder pattern through its trailing closure. No additional configuration properties are exposed.

content

The content property is a closure that returns the view to be wrapped inside the card container.

                                                        
                                                        
                                                            BB.Card {
                                                            Text("Card content goes here")
                                                        }
                                                        
                                                            

Usage

Basic usage

Wrap any content inside a card container.

                                                        
                                                        
                                                            import SwiftUI
                                                        import BackbaseDesignSystem
                                                        
                                                        struct ContentView: View {
                                                            var body: some View {
                                                                BB.Card {
                                                                    Text("Card Content")
                                                                }
                                                            }
                                                        }
                                                        
                                                            

Common use cases

Grouping related content

Use cards to visually group related information.

                                                        
                                                        
                                                            BB.Card {
                                                            VStack(alignment: .leading, spacing: 8) {
                                                                Text("Account Summary")
                                                                    .font(.headline)
                                                                Text("Balance: $1,234.56")
                                                                Text("Last updated: Today")
                                                            }
                                                        }
                                                        
                                                            

Multiple cards in a list

Display multiple cards in a scrollable list.

                                                        
                                                        
                                                            ScrollView {
                                                            VStack(spacing: 16) {
                                                                BB.Card {
                                                                    Text("First Card")
                                                                }
                                                                BB.Card {
                                                                    Text("Second Card")
                                                                }
                                                            }
                                                            .padding()
                                                        }
                                                        
                                                            

States and variants

Default state

The card displays with a background color, shadow, and rounded corners.
Visual characteristics:

• Surface background color
• Subtle shadow for elevation
• Rounded corners

                                                        
                                                        
                                                            BB.Card {
                                                            Text("Default card appearance")
                                                        }
                                                        
                                                            

Customization

Styling

The BB.Card component uses the design system's card styling tokens. Customization is applied through the theming infrastructure.

Custom styles

To customize card appearance, modify the theme tokens in your custom JSON theme file and load it using Theme.switchTo():

                                                        
                                                        
                                                            Theme.switchTo("customTokens")
                                                        
                                                            

Usage best practices

• Use cards to group related content and create visual hierarchy in your app.
• Keep card content focused and relevant to maintain a clean user interface.
• Consider using padding to create proper spacing between the card's content and its edges.
• Use cards to create visual separation between different sections of content.

Accessibility

This component can be configured with accessibility features at the integration level. Use the standard SwiftUI accessibility modifiers to ensure a fully accessible experience for all users.

Accessibility configuration

Best practices

• Provide meaningful accessibility labels that describe the element's purpose.
• Use accessibility hints to provide additional context when needed.
• Ensure all interactive elements are accessible.

                                                        
                                                        
                                                            BB.Card {
                                                            Text("Account Summary")
                                                        }
                                                        .accessibilityLabel("Account summary card")
                                                        .accessibilityHint("Contains account balance information")
                                                        
                                                            

Dependencies

• External dependencies: None
• Internal dependencies: BackbaseDesignSystem

Design tokens

Component styling is applied automatically through the design system's theming infrastructure.

JSON tokens

This component uses semantic tokens only. See Semantic tokens below.

Semantic tokens

These tokens are accessed via the public DesignSystem.shared API.

See also

• BB.DataList - Structured list view for displaying data