Card

    Overview

    When to use

    The card is used to display information in a compact and structured manner.

    When to consider an alternative

    If the displayed content should be emotional and if it's too long. Don't use the card with more than 380px width. The card doesn't work in an parent with the modifier --is-block or .util-block

    Image sizes

    Parent Elementbrp-0brp-1brp-2brp-3brp-4
    Card Image16:916:916:916:916:9
    Max. Height164px254px190px164px200px

    Component

    Default

    1024px
    375px768px1400px

    Properties

    Card

    PropertyTypeRequiredDefault
    childrenUnion
    Class(Card.Header) │ Class(Card.Body) │ Class(Card.Footer) │ Array<Class(Card.Header) │ Class(Card.Body) │ Class(Card.Footer)>
    false-

    Card.Header

    PropertyTypeRequiredDefault
    childrenNodefalse-

    Card.Image

    PropertyTypeRequiredDefault
    srcStringtrue-
    altStringtrue-

    Card.Body

    PropertyTypeRequiredDefault
    childrenNodefalse-

    Card.Footer

    PropertyTypeRequiredDefault
    childrenNodefalse-