Available from v1.0.0

Card

Card is a surface container for focused content with themed color, radius, shadow, and sizing.

Platform availability: iOS 17.0+

When to use:

• Use Card when you need to group related content in a visually distinct container with elevation and rounded corners.
• Consider a custom container when you need a container without shadow or surface styling.

It includes the following features:

• Themed background color from design system.
• Configurable corner radius and shadow.
• Corresponds to global surface primary settings.

Import

UIKit framework

Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

API reference

Card

A UIView subclass that serves as a surface container for focused content with themed styling.

Initializers

init(frame:style:)

init(_:)

Configuration

Global properties

These global settings affect the final look of the cardView style:

Usage

Basic usage

                                                        
                                                        
                                                            let card = Card()
                                                        card.translatesAutoresizingMaskIntoConstraints = false
                                                        view.addSubview(card)
                                                        
                                                        NSLayoutConstraint.activate([
                                                            card.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
                                                            card.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
                                                            card.topAnchor.constraint(equalTo: view.topAnchor, constant: 16),
                                                            card.heightAnchor.constraint(equalToConstant: 200)
                                                        ])
                                                        
                                                            

With custom frame

                                                        
                                                        
                                                            let card = Card(frame: CGRect(x: 16, y: 16, width: 300, height: 200))
                                                        view.addSubview(card)
                                                        
                                                            

With custom style

                                                        
                                                        
                                                            let customStyle: Style<UIView> = { view in
                                                            view.backgroundColor = .systemBackground
                                                            view.layer.cornerRadius = 12
                                                            view.layer.shadowColor = UIColor.black.cgColor
                                                            view.layer.shadowOffset = CGSize(width: 0, height: 2)
                                                            view.layer.shadowRadius = 4
                                                            view.layer.shadowOpacity = 0.1
                                                        }
                                                        
                                                        let card = Card(customStyle)
                                                        
                                                            

Adding content to a card

                                                        
                                                        
                                                            let card = Card()
                                                        card.translatesAutoresizingMaskIntoConstraints = false
                                                        
                                                        let titleLabel = UILabel()
                                                        titleLabel.text = "Card Title"
                                                        titleLabel.translatesAutoresizingMaskIntoConstraints = false
                                                        card.addSubview(titleLabel)
                                                        
                                                        NSLayoutConstraint.activate([
                                                            titleLabel.leadingAnchor.constraint(equalTo: card.leadingAnchor, constant: 16),
                                                            titleLabel.topAnchor.constraint(equalTo: card.topAnchor, constant: 16)
                                                        ])
                                                        
                                                            

States and variants

Default variant

The standard card with surface background, corner radius, and shadow.
Visual characteristics:

• Surface primary background color
• Rounded corners
• Small shadow for elevation

                                                        
                                                        
                                                            let card = Card()
                                                        
                                                            

Custom styled variant

A card with custom visual properties.
Visual characteristics:

• Custom background color
• Custom corner radius
• Custom shadow configuration

                                                        
                                                        
                                                            let customStyle: Style<UIView> = { view in
                                                            view.backgroundColor = .systemBlue.withAlphaComponent(0.1)
                                                            view.layer.cornerRadius = 16
                                                        }
                                                        
                                                        let card = Card(customStyle)
                                                        
                                                            

Customization

Styling

Custom shadow

                                                        
                                                        
                                                            let customStyle: Style<UIView> = DesignSystem.shared.styles.cardView <> { view in
                                                            view.layer.shadowColor = UIColor.black.cgColor
                                                            view.layer.shadowOffset = CGSize(width: 0, height: 4)
                                                            view.layer.shadowRadius = 8
                                                            view.layer.shadowOpacity = 0.15
                                                        }
                                                        
                                                        let card = Card(customStyle)
                                                        
                                                            

Custom corner radius

                                                        
                                                        
                                                            let customStyle: Style<UIView> = DesignSystem.shared.styles.cardView <> { view in
                                                            view.layer.cornerRadius = 24
                                                        }
                                                        
                                                        let card = Card(customStyle)
                                                        
                                                            

Accessibility

The Card component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.

Accessibility configuration

Best practices

• The card is a container view and does not have specific accessibility traits by default
• Content added to the card should have appropriate accessibility labels and traits
• Consider grouping card content as a single accessibility element when appropriate
• Use accessibilityElements to control the reading order of child elements

Dependencies

• External dependencies: None
• Internal dependencies: None

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.
The Card component relies on global surface and shadow tokens rather than component-specific JSON tokens.

Semantic tokens

See also

• Badge - Small text label component
• ChipView - Filter chip component