Card

The Card component family helps you compose structured, media-friendly content blocks using Bulma card markup.

API Documentation

How it works #

The Card component family mirrors Bulma's card structure so you can compose headers, media, content, and footer actions without hand-authoring the CSS classes yourself.

How to use:
  1. Wrap the overall layout in <Card>.
  2. Add sections such as <CardHeader>, <CardImage>, <CardContent>, and <CardFooter> as needed.
  3. Use <CardHeaderTitle> and <CardFooterItem> for the common sub-elements inside those regions.
This first example shows the smallest useful card: a title and a body.

Getting started

Cards are flexible containers for grouping a heading, supporting content, and optional actions into a clean presentation. 
<Card style="max-width: 30rem;">
    <CardHeader>
        <CardHeaderTitle>Getting started</CardHeaderTitle>
    </CardHeader>
    <CardContent>
        Cards are flexible containers for grouping a heading, supporting content, and optional actions into a clean presentation.
    </CardContent>
</Card>

With image #

The CardImage section lets you place visual content at the top of a card while keeping the markup aligned with Bulma's expected card image structure.

How to use:
  1. Add a CardImage section inside the Card component.
  2. Place your image markup, such as a Bulma figure and img, inside the CardImage tags.
  3. Follow the image section with CardContent to provide supporting text or related content.
This demo shows a card with a top image section followed by descriptive content.
Image component screenshot used inside a card
Use CardImage when you want rich visual content at the top of the card.
This example reuses a local demo asset to keep the sample self-contained.
<Card style="max-width: 30rem;">
    <CardImage>
        <figure class="image is-4by3">
            <img src="@DemoScreenshotSrcConstants.Image" alt="Image component screenshot used inside a card" />
        </figure>
    </CardImage>
    <CardContent>
        <div class="content">
            Use <code>CardImage</code> when you want rich visual content at the top of the card.
            <br />
            <small>This example reuses a local demo asset to keep the sample self-contained.</small>
        </div>
    </CardContent>
</Card>

Header icon #

The CardHeaderIcon section is useful when the card header needs an action affordance, such as a menu trigger, expand/collapse toggle, or quick action button.

How to use:
  1. Add a CardHeader section to your card.
  2. Place a CardHeaderTitle for the heading and a CardHeaderIcon for the action element.
  3. Set the AriaLabel parameter to provide an accessible label for the rendered button.
This demo shows a card header with a title and an icon button for additional actions.

Reports

Add a CardHeaderIcon to expose quick actions, menus, or toggle affordances in the header. 
<Card style="max-width: 30rem;">
    <CardHeader>
        <CardHeaderTitle>Reports</CardHeaderTitle>
        <CardHeaderIcon AriaLabel="open report menu">
            <BootstrapIcon Name="BootstrapIconName.ChevronDown" />
        </CardHeaderIcon>
    </CardHeader>
    <CardContent>
        Add a <code>CardHeaderIcon</code> to expose quick actions, menus, or toggle affordances in the header.
    </CardContent>
</Card>
The CardFooter section is intended for actions or links related to the card's content. Using CardFooterItem keeps those actions evenly distributed across the footer area.

How to use:
  1. Add a CardFooter section at the bottom of the Card component.
  2. Place one or more CardFooterItem components inside the footer.
  3. Use the Href parameter on each footer item when you want the action to navigate to another page or resource.
This demo shows a card footer with multiple evenly spaced action links.
Footer items are handy for secondary actions like sharing, bookmarking, or navigation. 
<Card style="max-width: 30rem;">
    <CardContent>
        <div class="content">
            Footer items are handy for secondary actions like sharing, bookmarking, or navigation.
        </div>
    </CardContent>
    <CardFooter>
        <CardFooterItem Href="https://github.com/BlazorExpress/BlazorExpress.Bulma/issues/40">Issue</CardFooterItem>
        <CardFooterItem Href="https://bulma.io/documentation/components/card/">Spec</CardFooterItem>
        <CardFooterItem Href="@DemoRouteConstants.Docs_Card_Documentation">API</CardFooterItem>
    </CardFooter>
</Card>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!