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"
}

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.

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

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

        Spacer(size: .extraLarge)
    }
}

solid style

bordered style

Created with Ignite