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: 300)

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

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.

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

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 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.

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 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.

Created with Ignite