Cards

Cards provide a standard way of representing group information.

They have various options depending on what data you want to provide and how you want it to look.

Here's an example card, with image, content, and a button going back to the homepage:

Card(imageName: "/images/photos/dishwasher.jpg") {
    Text("Before putting your dishes into the dishwasher, make sure and give them a quick pre-clean.")

    Link("Back to the homepage", target: "/")
        .linkStyle(.button)
}
.frame(maxWidth: 500)

Before putting your dishes into the dishwasher, make sure and give them a quick pre-clean.

Back to the homepage

It’s also possible to omit the imageName parameter and simply place a image in the content:

Card {
    Text("An image embedded")
    Image(decorative: "/images/photos/rug.jpg")
    Text("as part of the card")
}
.frame(maxWidth: 500)

An image embedded

as part of the card

Content position

By default the contents of your card are positioned below any image, but you can change that using .contentPosition() with a value of ContentPosition.top or ContentPosition.bottom.

Card(imageName: "/images/photos/rug.jpg") {
    Text(markdown: "Content below image: `.top`")
}
.contentPosition(.top)

Content below image: use .top

Content below image: use .bottom

Overlaying text

By default the contents of your card are positioned below any image, but you can change that using .contentPosition(.overlay) and optionally also the imageOpacity() modifier.

Card(imageName: "/images/photos/dishwasher.jpg") {
    Text("Before putting your dishes into the dishwasher, make sure and give them a quick pre-clean.")
        .foregroundStyle(.white)

    Link("Back to the homepage", target: "/")
        .linkStyle(.button)
}
.frame(maxWidth: 500)
.contentPosition(.overlay)
.imageOpacity(0.5)

Before putting your dishes into the dishwasher, make sure and give them a quick pre-clean.

Back to the homepage

To control the position of the overlay you can specify an alignment using .overlay(alignment:) with one of the following options:

.topLeading

Back to the homepage

.top

Back to the homepage

.topTrailing

Back to the homepage

.leading

Back to the homepage

.center

Back to the homepage

.trailing

Back to the homepage

.bottomLeading

Back to the homepage

.bottom

Back to the homepage

.bottomTrailing

Back to the homepage

Headers and footers

You can attach headers and/or footers to your cards, and they automatically get styled appropriately. This is in addition to any image you provide, or any titles used in the card body.

Card {
    Text("This is important!")
        .font(.title3)
    Text("This is card body text. This is card body text. This is card body text. This is card body text. This is card body text.")
} header: {
    "Header Example"
} footer: {
    "Your footer goes here footer"
}
Header Example

This is important!

This is card body text. This is card body text. This is card body text. This is card body text. This is card body text.

Your footer goes here footer

Card styles

Cards have three styles: .default, .solid, and .bordered, and can also be assigned roles. The .default style does nothing special, but both .solid and .bordered apply coloring based on role.

ForEach(Card.Style.allCases) { style in
    if style != .default {
        Text(markdown: "`\(style)` style")
            .font(.title3)

        ForEach(Role.allCases) { role in
            Card {
                "This is a \(style) card with the \(role) role."
            } header: {
                "Header"
            }
            .role(role)
            .cardStyle(style)
            .margin(.bottom)
        }

        Spacer(size: .xLarge)
    }
}

solid style

Header
This is a solid card with the default role.
Header
This is a solid card with the primary role.
Header
This is a solid card with the secondary role.
Header
This is a solid card with the close role.
Header
This is a solid card with the success role.
Header
This is a solid card with the danger role.
Header
This is a solid card with the warning role.
Header
This is a solid card with the info role.
Header
This is a solid card with the light role.
Header
This is a solid card with the dark role.
Header
This is a solid card with the none role.

bordered style

Header
This is a bordered card with the default role.
Header
This is a bordered card with the primary role.
Header
This is a bordered card with the secondary role.
Header
This is a bordered card with the close role.
Header
This is a bordered card with the success role.
Header
This is a bordered card with the danger role.
Header
This is a bordered card with the warning role.
Header
This is a bordered card with the info role.
Header
This is a bordered card with the light role.
Header
This is a bordered card with the dark role.
Header
This is a bordered card with the none role.

Created in Swift with Ignite