RizzyUI

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
<RzCard class="w-full">
    <CardHeader>
        <CardTitle>Information</CardTitle>
        <CardSubtitle>This is a subtitle</CardDescription>
        <CardAction>
            <RzButton Size="Size.Small" Variant="ThemeVariant.Information">
                <Blazicon Svg="MdiIcon.Plus"></Blazicon>
                <span>New Project</span>
            </RzButton>
            <RzButton Size="Size.Small" Variant="ThemeVariant.Information">
                <Blazicon Svg="MdiIcon.AccountMultiple"></Blazicon>
                <span>Clients</span>
            </RzButton>
        </CardAction>
    </CardHeader>
    <CardContent>Body content here</CardContent>
    <CardFooter>Footer content here</CardFooter>
</RzCard>

Article Card

A card with an image, title, and description.

Source
  <RzCard class="max-w-sm py-0 pb-6 overflow-hidden">
<img src="/images/card2.jpg" class="h-44 w-full object-cover transition duration-700 ease-out group-hover:scale-105" alt="coffee beans spilling out from a coffee mug" />
   <CardContent>
    <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>							
   </CardContent>
   <CardFooter>
    <RzButton Variant="ThemeVariant.Primary">View</RzButton>
   </CardFooter>
  </RzCard>

RzCard Component Parameters

PropertyDescriptionTypeDefault
ChildContentRenderFragment? – The content to be rendered inside the card.RenderFragment?null

CardContent Component Parameters

PropertyDescriptionTypeDefault
ChildContentRenderFragment? – The content to be rendered inside the card body.RenderFragment?null

CardAction Component Parameters

PropertyDescriptionTypeDefault
ChildContentRenderFragment? – The buttons or other action elements to be rendered within this container.RenderFragment?null

CardFooter Component Parameters

PropertyDescriptionTypeDefault
ChildContentRenderFragment? – The content to be rendered inside the card footer.RenderFragment?null

CardHeader Component Parameters

PropertyDescriptionTypeDefault
ChildContentRenderFragment? – The content to be rendered inside the card header.RenderFragment?null

CardDescription Component Parameters

PropertyDescriptionTypeDefault
ChildContentRenderFragment? – The text or content to be rendered as the card subtitle.RenderFragment?null

CardTitle Component Parameters

PropertyDescriptionTypeDefault
ChildContentRenderFragment? – The text or content to be rendered as the card title.RenderFragment?null