Blazor Card

Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Simple card (image top)

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

<div style="max-width:345px">
    <BlazorCard>
        <BlazorCardImage src="..." />
        <BlazorCardContent>
            <BlazorCardTitle>
                <h3>Lizard</h3>
            </BlazorCardTitle>
            <BlazorCardText>
                <p>...</p>
            </BlazorCardText>
            <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}">Learn more</BlazorButton>
        </BlazorCardContent>
    </BlazorCard>
</div>

Simple card (image bottom)

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

<div style="max-width:345px">
    <BlazorCard>
        <BlazorCardContent>
            <BlazorCardTitle>
                <h3>Lizard</h3>
            </BlazorCardTitle>
            <BlazorCardText>
                <p>...</p>
            </BlazorCardText>
            <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}">Learn more</BlazorButton>
        </BlazorCardContent>
        <BlazorCardImage Vertical="VerticalPosition.Bottom" src="..." />
    </BlazorCard>
</div>

Card variants:

None

Blazor Library is awesome!

Build your website with Blazor Library

just now

Primary

Blazor Library is awesome!

Build your website with Blazor Library

just now

Secondary

Blazor Library is awesome!

Build your website with Blazor Library

just now

Success

Blazor Library is awesome!

Build your website with Blazor Library

just now

Warning

Blazor Library is awesome!

Build your website with Blazor Library

just now

Info

Blazor Library is awesome!

Build your website with Blazor Library

just now

Danger

Blazor Library is awesome!

Build your website with Blazor Library

just now
<BlazorCard>
    <BlazorCardHeader RenderAs="h4">
        <div style="text-align: center">None</div>
        </BlazorCardHeader>
    <BlazorCardContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
    </BlazorCardContent>
    <BlazorCardFooter>just now</BlazorCardFooter>
</BlazorCard>

<BlazorCard Variants="new[] {BaseVariants.Primary}">
    <BlazorCardHeader RenderAs="h4">
        <div style="text-align: center">Primary</div>
        </BlazorCardHeader>
    <BlazorCardContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
    </BlazorCardContent>
    <BlazorCardFooter>just now</BlazorCardFooter>
</BlazorCard>

<BlazorCard Variants="new[] {BaseVariants.Secondary}">
    <BlazorCardHeader RenderAs="h4">
        <div style="text-align: center">Secondary</div>
        </BlazorCardHeader>
    <BlazorCardContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
    </BlazorCardContent>
    <BlazorCardFooter>just now</BlazorCardFooter>
</BlazorCard>

<BlazorCard Variants="new[] {BaseVariants.Success}">
    <BlazorCardHeader RenderAs="h4">
        <div style="text-align: center">Success</div>
        </BlazorCardHeader>
    <BlazorCardContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
    </BlazorCardContent>
    <BlazorCardFooter>just now</BlazorCardFooter>
</BlazorCard>

<BlazorCard Variants="new[] {BaseVariants.Warning}">
    <BlazorCardHeader RenderAs="h4">
        <div style="text-align: center">Warning</div>
        </BlazorCardHeader>
    <BlazorCardContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
    </BlazorCardContent>
    <BlazorCardFooter>just now</BlazorCardFooter>
</BlazorCard>

<BlazorCard Variants="new[] {BaseVariants.Info}">
    <BlazorCardHeader RenderAs="h4">
        <div style="text-align: center">Info</div>
        </BlazorCardHeader>
    <BlazorCardContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
    </BlazorCardContent>
    <BlazorCardFooter>just now</BlazorCardFooter>
</BlazorCard>

<BlazorCard Variants="new[] {BaseVariants.Danger}">
    <BlazorCardHeader RenderAs="h4">
        <div style="text-align: center">Danger</div>
        </BlazorCardHeader>
    <BlazorCardContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
    </BlazorCardContent>
    <BlazorCardFooter>just now</BlazorCardFooter>
</BlazorCard>

Card with header & footer

Feature

Blazor Library is awesome!

Build your website with Blazor Library

just now
<BlazorCard>
    <BlazorCardHeader>Feature</BlazorCardHeader>
    <BlazorCardContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
        <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}">Learn more</BlazorButton>
    </BlazorCardContent>
    <BlazorCardFooter>just now</BlazorCardFooter>
</BlazorCard>

Overlayed card

Blazor Library is awesome!

Build your website with Blazor Library

<BlazorCard>
    <BlazorCardOverlayImage src="..." />
    <BlazorCardOverlayContent>
        <BlazorCardTitle>
            <h3>Blazor Library is awesome!</h3>
        </BlazorCardTitle>
        <BlazorCardText>
            <p>Build your website with Blazor Library</p>
        </BlazorCardText>
        <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}">Learn more</BlazorButton>
    </BlazorCardOverlayContent>
</BlazorCard>

Card group:

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

Feature

Blazor Library is awesome!

Build your website with Blazor Library

just now

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

<BlazorCardGroup>
    <BlazorCard>
        <BlazorCardContent>
            <BlazorCardTitle>
                <h3>Lizard</h3>
            </BlazorCardTitle>
            <BlazorCardText>
                <p>...</p>
            </BlazorCardText>
            <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}">Learn more</BlazorButton>
        </BlazorCardContent>
        <BlazorCardImage Vertical="VerticalPosition.Bottom" src="..." />
    </BlazorCard>

    <BlazorCard>
        <BlazorCardHeader RenderAs="h4">
            <div style="text-align: center">Feature</div>
            </BlazorCardHeader>
        <BlazorCardContent>
            <BlazorCardTitle>
                <h3>Blazor Library is awesome!</h3>
            </BlazorCardTitle>
            <BlazorCardText>
                <p>Build your website with Blazor Library</p>
            </BlazorCardText>
            <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}">Learn more</BlazorButton>
        </BlazorCardContent>
        <BlazorCardFooter>just now</BlazorCardFooter>
    </BlazorCard>

    <BlazorCard>
        <BlazorCardImage src="..." />
        <BlazorCardContent>
            <BlazorCardTitle>
                <h3>Lizard</h3>
            </BlazorCardTitle>
            <BlazorCardText>
                <p>...</p>
            </BlazorCardText>
            <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}">Learn more</BlazorButton>
        </BlazorCardContent>
    </BlazorCard>
</BlazorCardGroup>

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorCard card
BlazorCard.primary text-bg-primary
BlazorCard.secondary text-bg-secondary
BlazorCard.success text-bg-success
BlazorCard.danger text-bg-danger
BlazorCard.warning text-bg-warning
BlazorCard.info text-bg-info
BlazorCardContent card-body
BlazorCardImage.top card-img-top
BlazorCardImage.bottom card-img-bottom
BlazorCardTitle card-title
BlazorCardText card-text
BlazorCardHeader card-header
BlazorCardFooter card-footer
BlazorCardOverlayImage card-img
BlazorCardOverlayContent card-img-overlay
BlazorCardGroup card-group

Parameters

BlazorCard

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.

BlazorCardContent

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorCardGroup

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorCardHeader

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorCardImage

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Vertical VerticalPosition Specify the vertical position of the image relative to its parent element.

BlazorCardOverlayContent

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorCardOverlayImage

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorCardText

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorCardTitle

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙