Card

Cards are a great way to display information in a visually appealing format. They can be used to display images, text, and more.

Default Card

A card with a header and footer

Source

<Card class="w-full">
    <RzCardHeader>
        <div>
            <RzCardTitle>Information</RzCardTitle>
            <CardSubtitle>This is a subtitle</CardSubtitle>
        </div>
        <RzCardButtons>
            <RzButton Size="Size.Small" Variant="ButtonVariant.Information">
                <Blazicon Svg="MdiIcon.Plus"></Blazicon>
                <span>New Project</span>
            </RzButton>
            <RzButton Size="Size.Small" Variant="ButtonVariant.Information">
                <Blazicon Svg="MdiIcon.AccountMultiple"></Blazicon>
                <span>Clients</span>
            </RzButton>
        </RzCardButtons>
    </RzCardHeader>
    <RzCardBody>Body content here</RzCardBody>
    <RzCardFooter>Footer content here</RzCardFooter>
</Card>

RzArticle Card

A card with an image, title, and description.

Source

<Card class="max-w-sm">
    <div class="h-44 md:h-64 overflow-hidden"> 
        <img src="/images/card2.jpg" class="h-full object-cover transition duration-700 ease-out group-hover:scale-105" alt="coffee beans spilling out from a coffee mug" />
    </div>

    <RzCardBody BackgroundColor="SemanticColor.SurfaceAlt">
        <span class="text-sm font-medium">Features</span>
        <RzHeading Level="HeadingLevel.H2">Elevate your Coffee Brew With This One Trick</RzHeading>
        <RzParagraph class="text-sm mb-0">
         Whether you're a barista or a coffee enthusiast, this guide provides expert tips on selecting quality beans, mastering 
         the grind, and refining your brewing technique to elevate your coffee ritual and savor every sip.
        </RzParagraph>							
    </RzCardBody>
    <RzCardFooter>
        <RzButton Variant="ButtonVariant.Primary">View</RzButton>
    </RzCardFooter>
</Card>