CardComponent

This class combines the configuration and rendering of a CardComponent.

A card consists of arbitrary content that is optionally decorated with a header and a footer. Cards can be configured in different sizes and offer the following configurable properties:

• size: The size of the card, ranging from small to large. Both the font-size and margins are set accordingly.

• content: The main content of the card

• header: The header area of the card

• footer: The footer area of the card

An optional styling parameter can be passed to the above properties in case you specify custom content via RenderContext.

The content-related properties (header, footer and content) don't only take layouts but also Strings and Flows of Strings for your convenience. Cards are created via the card factory function.

Cards can have different types which are the same as in PaperComponent. This is due to the fact, that the CardComponent uses a PaperComponent internally. The type can be specified via the type property.

Usage example:

card {
    size { small }
    type { normal }
    paperType { normal }
    header("Header")
    content("Lorem ipsum, dolor sit amet...")
    footer("Footer")
}

card {
    size { normal }
    header("Simple Header")
    content({
        // Optional additional styling
        background { color { gray300 } }
    }) {
        span {
            +"Custom Content"
        }
    }
}