Edit on Github

Card

in namespace DotVVM.Controls.Tailwind.Controls

Renders a card component.

Usage & Scenarios

Renders a styled card with optional header, image, footer, semantic variant, and linked-card behavior. Use Orientation, Type, and NavigateUrl to switch between the main presentation modes.

Sample 1: Basic Card

Shows a basic card with header, content, and a footer action.

<div class="max-w-sm">
    <t:Card HeaderText="Card Title">
        <ContentTemplate>
            <p>This is the card content. It can contain any HTML or controls.</p>
        </ContentTemplate>
        <FooterTemplate>
            <a class="button button-primary" href="?card=basic">Action</a>
        </FooterTemplate>
    </t:Card>
</div>

Sample 2: Multiple Cards

Shows a responsive grid with multiple cards.

<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));">
    <t:Card HeaderText="Card 1">
        <ContentTemplate>
            <p>First card content.</p>
        </ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Card 2">
        <ContentTemplate>
            <p>Second card content.</p>
        </ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Card 3">
        <ContentTemplate>
            <p>Third card content.</p>
        </ContentTemplate>
    </t:Card>
</div>

Sample 3: Card with Image

Demonstrates ImageUrl and ImageAlt using both static values and bindings.

<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));">
    <t:Card HeaderText="Static Image" ImageUrl="https://picsum.photos/400/200" ImageAlt="Sample image">
        <ContentTemplate>
            <p>This card has a hard-coded image URL.</p>
        </ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Dynamic Image" ImageUrl="{value: DynamicImageUrl}" ImageAlt="{value: DynamicImageAlt}">
        <ContentTemplate>
            <p>This card binds ImageUrl and ImageAlt from the viewmodel.</p>
        </ContentTemplate>
    </t:Card>
</div>


using DotVVM.Framework.ViewModel;

public class ViewModel : DotvvmViewModelBase
{
    public string DynamicImageUrl { get; set; } = "https://picsum.photos/400/200?random=1";

    public string DynamicImageAlt { get; set; } = "Dynamic image";
}

Sample 4: Horizontal Card

Shows the horizontal layout using Orientation="Horizontal". The card still uses the same Header*, ContentTemplate, FooterTemplate, and image properties.

<div class="max-w-xl">
    <t:Card Orientation="Horizontal" ImageUrl="https://picsum.photos/200/300" ImageAlt="Sample horizontal image" HeaderText="Horizontal Card">
        <ContentTemplate>
            <p>Image on the left, content on the right side of the card.</p>
        </ContentTemplate>
        <FooterTemplate>
            <a class="button button-primary" href="?layout=horizontal">Learn more</a>
        </FooterTemplate>
    </t:Card>
</div>

Sample 5: Colored Cards

Applies semantic variants using the current Type property.

<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));">
    <t:Card HeaderText="Primary" Type="Primary">
        <ContentTemplate><p>Primary color card.</p></ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Success" Type="Success">
        <ContentTemplate><p>Success color card.</p></ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Warning" Type="Warning">
        <ContentTemplate><p>Warning color card.</p></ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Danger" Type="Danger">
        <ContentTemplate><p>Danger color card.</p></ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Info" Type="Info">
        <ContentTemplate><p>Info color card.</p></ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Secondary" Type="Secondary">
        <ContentTemplate><p>Secondary color card.</p></ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Dark" Type="Dark">
        <ContentTemplate><p>Dark color card.</p></ContentTemplate>
    </t:Card>
    <t:Card HeaderText="Light" Type="Light">
        <ContentTemplate><p>Light color card.</p></ContentTemplate>
    </t:Card>
</div>

Sample 6: Custom Header Template

Uses HeaderTemplate to render custom header content.

<div class="max-w-sm">
    <t:Card>
        <HeaderTemplate>
            <div class="flex items-center gap-2">
                <strong>Settings</strong>
                <t:Badge Text="New" Color="Primary" />
            </div>
        </HeaderTemplate>
        <ContentTemplate>
            <p>This card uses HeaderTemplate for custom header content.</p>
        </ContentTemplate>
    </t:Card>
</div>

Sample 7: Card as Link

Uses NavigateUrl and NewTab so the whole card acts as a link. Avoid nesting <a> tags inside a linked card because the root element already renders as an anchor.

<div class="max-w-sm">
    <t:Card HeaderText="Linked Card" ImageUrl="https://picsum.photos/400/200" ImageAlt="Sample image" NavigateUrl="?card=linked" NewTab="true">
        <ContentTemplate>
            <p>This card uses NavigateUrl so the whole surface works as a link inside the sample app.</p>
        </ContentTemplate>
    </t:Card>
</div>

Properties

Name Type Description Notes Default Value
property icon ContentTemplate ITemplate Main content template rendered inside the card body.
attribute
inner element
static value
bindable
default
 null
property icon FooterTemplate ITemplate Footer template rendered at the bottom of the card body.
attribute
inner element
static value
bindable
default
 null
property icon HeaderTemplate ITemplate Gets or sets the custom content rendered in the card header.
attribute
inner element
static value
bindable
default
 null
property icon HeaderText String Gets or sets the text displayed in the card header.
attribute
inner element
static value
bindable
default
 null
property icon ImageAlt String Alternative text for the card image.
attribute
inner element
static value
bindable
default
 null
property icon ImageUrl String Optional image URL rendered at the top of the card.
attribute
inner element
static value
bindable
default
 null
property icon NavigateUrl String Optional URL that turns the whole card into a link.
attribute
inner element
static value
bindable
default
 null
property icon NewTab Boolean When true, opens in a new tab.
attribute
inner element
static value
bindable
default
 False
property icon Orientation Orientation Determines whether the card uses vertical or horizontal layout.
attribute
inner element
static value
bindable
default
 Vertical
property icon Type TailwindColor Semantic card styling variant.
attribute
inner element
static value
bindable
default
 Default
property icon Visible Boolean Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.
attribute
inner element
static value
bindable
default
 True

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization