Cards

Cards contain content and actions about a single subject.

On this page

Specifications references
Accessibility
Variants

Specifications references

Accessibility

Please follow accessibility criteria for development.

The contents within a card should follow their own accessibility guidelines, such as images having content descriptions set on them. The ODS library cards APIs forces the developers to add content descriptions on card images.

Variants

The library offers several Composables for Jetpack Compose implementation.

Vertical image first card

This is a full width card containing elements arranged vertically with an image as first element.

Vertical image first card light Vertical image first card dark

Jetpack Compose

In your composable screen you can use OdsVerticalImageFirstCard composable:

OdsVerticalImageFirstCard(
    title = "Title",
    image = OdsCard.Image(
        painterResource(R.drawable.picture),
        "Picture content description",
        Alignment.Center,
        ContentScale.Crop,
        Color(0xff1b1b1b)
    ),
    subtitle = "Subtitle",
    text = "Text",
    firstButton = OdsCard.Button("First button") { doSomething() },
    secondButton = OdsCard.Button("Second button") { doSomething() },
    onClick = { doSomething() }
)

OdsVerticalImageFirstCard API

Parameter	Default value	Description
`title: String`		Title displayed into the card
`image: OdsCard.Image`		Image displayed into the card
`modifier: Modifier`	`Modifier`	`Modifier` applied to the layout of the card
`subtitle: String?`	`null`	Subtitle displayed into the card
`text: String?`	`null`	Text displayed into the card
`firstButton: OdsCard.Button?`	`null`	First button displayed into the card
`secondButton: OdsCard.Button?`	`null`	Second button displayed into the card
`onClick: (() -> Unit)?`	`null`	Callback invoked on card click

Vertical header first card

This is a full width card containing elements arranged vertically with a header (thumbnail, title & subtitle) as first element.

Vertical header first card light Vertical header first card dark

Jetpack Compose

In your composable screen you can use OdsVerticalHeaderFirstCard composable:

OdsVerticalHeaderFirstCard(
    title = "Title",
    image = OdsCard.Image(
        painterResource(R.drawable.picture),
        "Picture content description",
        Alignment.Center,
        ContentScale.Crop,
        Color(0xff1b1b1b)
    ),
    thumbnail = OdsCard.Thumbnail(
        painterResource(R.drawable.thumbnail),
        "Thumbnail content description"
    ),
    subtitle = "Subtitle",
    text = "Text",
    firstButton = OdsCard.Button("First button") { doSomething() },
    secondButton = OdsCard.Button("Second button") { doSomething() },
    onClick = { doSomething() }
)

OdsVerticalHeaderFirstCard API

Parameter	Default value	Description
`title: String`		Title displayed into the card
`image: OdsCard.Image`		Image displayed into the card
`modifier: Modifier`	`Modifier`	`Modifier` applied to the layout of the card
`thumbnail: OdsCard.Thumbnail?`	`null`	Thumbnail displayed into the card next to the title: avatar, logo or icon.
`subtitle: String?`	`null`	Subtitle displayed into the card
`text: String?`	`null`	Text displayed into the card
`firstButton: OdsCard.Button?`	`null`	First button displayed into the card
`secondButton: OdsCard.Button?`	`null`	Second button displayed into the card
`onClick: (() -> Unit)?`	`null`	Callback called on card click

Small card

This is a small card which takes the half screen width.

CardSmall CardSmall dark

Jetpack Compose

You can add an OdsSmallCard composable in your screen to add a small card:

Row(
    horizontalArrangement = Arrangement.spacedBy(16.dp),
) {
    OdsSmallCard(
        title = "Title",
        image = OdsCard.Image(
            painterResource(R.drawable.picture),
            "Picture content description"
        ),
        modifier = Modifier.weight(0.5f),
        onClick = { doSomething() }
    )
    OdsSmallCard(
        title = "Title",
        image = OdsCard.Image(
            painterResource(R.drawable.picture),
            "Picture content description"
        ),
        modifier = Modifier.weight(0.5f),
        onClick = { doSomething() }
    )
}

OdsSmallCard API

Parameter	Default value	Description
`title: String`		Title displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed entirely for accessibility reasons.
`image: OdsCard.Image`		Image displayed into the card
`modifier: Modifier`	`Modifier`	`Modifier` applied to the layout of the card
`subtitle: String?`	`null`	Subtitle displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed entirely for accessibility reasons.
`onClick: (() -> Unit)?`	`null`	Callback invoked on card click

Horizontal card

This is a full screen width card with an image on the side. The image can be displayed on the left or on the right.

Horizontal card light Horizontal card dark

Jetpack Compose

In your screen you can use OdsHorizontalCard composable:

OdsHorizontalCard(
    title = "Title",
    image = OdsCard.Image(
        painterResource(R.drawable.picture),
        "Picture content description",
        Alignment.Center,
        ContentScale.Crop,
        Color(0xff1b1b1b)
    ),
    subtitle = "Subtitle",
    text = "Text",
    firstButton = OdsCard.Button("First button") { doSomething() },
    secondButton = OdsCard.Button("Second button") { doSomething() },
    imagePosition = OdsCard.Image.Position.Start,
    divider = false,
    onClick = { doSomething() }
)

OdsHorizontalCard API

Parameter	Default value	Description
`title: String`		Title displayed into the card
`image: OdsCard.Image`		Image displayed into the card
`modifier: Modifier`	`Modifier`	`Modifier` applied to the layout of the card
`subtitle: String?`	`null`	Subtitle displayed into the card
`text: String?`	`null`	Text displayed into the card
`firstButton: OdsCard.Button?`	`null`	First button displayed into the card
`secondButton: OdsCard.Button?`	`null`	Second button displayed into the card
`imagePosition: OdsCard.Image.Position`	`OdsCard.Image.Position.Start`	Position of the image within the card, it can be set to `OdsCard.Image.Position.Start` or `OdsCard.Image.Position.End`
`divider: Boolean`	`true`	Controls the divider display. If `true`, it will be displayed between the card content and the action buttons.
`onClick: (() -> Unit)?`	`null`	Callback invoked on card click