Cards

Cards contain content and actions about a single subject.

Page Summary

Specifications references

Accessibility

Please follow accessibility criteria for development

Images in cards are considered as decorative, so they are ignored by Voice Over.

Variants

Cards are a contained and independent element that can display content and actions on a single topic.

There are a few ways cards can be presented. Ranging from a single title on its own for a simple card view or with more information shown in a subtitle and supporting text and actions at the bottom of the card.

Vertical Image First Card

This is a full width card displayed with an image as first element.

This card is composed of two parts:

  • Media: (today an image)
  • Content: with a title, an optinal subtitle an optinal supporting text and optional buttons (zero up to two)

Implementation

Card is configured using ODSCardVerticalHeaderFirstModel like this:

let model = ODSCardVerticalImageFirstModel(
    title: "Title",
    subtitle: "Subtitle",
    image: Image("ods_empty", bundle: Bundle.ods),
    supportingText: "A supporting text to describe something")
    
ODSCardVerticalImageFirst(model: model) {
    ODSButton(text: "Button 1", emphasis: .medium) {
            // do something here
        }
    } buttonContent2: {
        ODSButton(text: "Button 1", emphasis: .medium) {
            // do something here
        } 
    }
}

Vertical Header First Card

This is a full width card displaying with a title and a thumbnail on top as first element.

This card is composed of three parts:

  • Header: with a title, an optinal subtitle and an optinal thmubnail
  • Media: (today an image)
  • Content: with an optinal supporting text and optional buttons (zero up to two)

Implementation

Card is configured using ODSCardVerticalHeaderFirstModel like this:

let model = ODSCardVerticalHeaderFirstModel(
    title: "Title",
    subtitle: "Subtitle",
    thumbnail: Image("ods_empty", bundle: Bundle.ods),
    image: Image("ods_empty", bundle: Bundle.ods),
    supportingText: "A supporting text to describe something")
    
ODSCardVerticalHeaderFirst(model: model) {
    ODSButton(text: "Button 1", emphasis: .medium) {
            // do something here
        }
    } buttonContent2: {
        ODSButton(text: "Button 1", emphasis: .medium) {
            // do something here
        } 
    }
}

Horizontal Card

This is a full width card displaying with image on left and content with texts on the right. Additonal action buttons can be added at the bottom of the card.

Thes content is composed by:

  • a title
  • an optional subtitle
  • an optional supporting text for larger description

Implementation

Card is configured using ODSCardHorizontalModel like this:

let model = ODSCardHorizontalModel(
    title: "Title",
    subtitle: "Subtitle",
    imageSource: .image(Image("ods_empty", bundle: Bundle.ods)),
    imagePosition: .leading,
    supportingText: "A supporting text to describe something")
    
ODSCardHorizontal(model: model) {
    ODSButton(text: "Button 1", emphasis: .medium) {
            // do something here
        }
    } buttonContent2: {
        ODSButton(text: "Button 1", emphasis: .medium) {
            // do something here
        } 
    }
}

Small Card

The small card if prefered for two-column portrait mobile screen display. As it is smaller than full-width cards, it contains only title and subtitle (optinal) in one line (Truncated tail).

Implementation

Card is configured using ODSCardSmallModel like this:

let model = ODSCardSmallModel(
    title: "Title",
    subtitle: "Subtitle",
    image: Image("ods_empty", bundle: Bundle.ods)) 

ODSCardSmall(model: model)

How to add Small Card in Grid

let models = [
    ODSCardSmallModel(
        title: "Title 1",
        subtitle: "Subtitle 1",
        image: Image("ods_empty", bundle: Bundle.ods)) { 
            Text("This card has a destination view")
        },
    ODSCardSmallModel(
        title: "Title 2",
        subtitle: "Subtitle 2",
        image: Image("ods_empty", bundle: Bundle.ods)) { 
            Text("This card has a destination view")
        },
    //...
    ]

/// /!\ Don't forget to put the grid into a scrollview
ScrollView {
    LazyVGrid(columns: columns, spacing: ODSSpacing.none) {
        ForEach(models) { model in
            ODSCardSmall(model: model)
        }
        .padding(.bottom, ODSSpacing.m)
    }
}