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">
    <CardHeader>
        <div>
            <CardTitle>Information</CardTitle>
            <CardSubtitle>This is a subtitle</CardSubtitle>
        </div>
        <CardButtons>
            <Button Size="Size.Small" Variant="ButtonVariant.Information">
                <Blazicon Svg="MdiIcon.Plus"></Blazicon>
                <span>New Project</span>
            </Button>
            <Button Size="Size.Small" Variant="ButtonVariant.Information">
                <Blazicon Svg="MdiIcon.AccountMultiple"></Blazicon>
                <span>Clients</span>
            </Button>
        </CardButtons>
    </CardHeader>
    <CardBody>Body content here</CardBody>
    <CardFooter>Footer content here</CardFooter>
</Card>

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

    <CardBody BackgroundColor="SemanticColor.SurfaceAlt">
        <span class="text-sm font-medium">Features</span>
        <Heading Level="HeadingLevel.H2">Elevate your Coffee Brew With This One Trick</Heading>
        <Paragraph 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.
        </Paragraph>							
    </CardBody>
    <CardFooter>
        <Button Variant="ButtonVariant.Primary">View</Button>
    </CardFooter>
</Card>