Skip to content
BlazorUI

Surfaces

Card

Bit.BlazorUI

Card is the surface for a single subject. On its own it is a padded box; give it a title, a cover, actions or a footer and it lays those parts out for you, with the cover above, beside, after or behind the content. It comes in three sizes, the whole color palette and a 25-step elevation ramp, and becomes an accessible button, block link or toggle when you need one.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

A padded surface around its ChildContent, only as wide as that content.


bit BlazorUI

bit BlazorUI components are native, easy-to-customize, and ...

Learn more(opens in a new tab)

Dimensions

Width, Height and the MinWidth/MaxWidth/MinHeight/MaxHeight bounds size the card; FullWidth, FullHeight and FullSize stretch it to its container, which keeps a row of cards in a grid one height. ScrollableBody scrolls what outgrows a bounded height - on a card with a header and a footer, only the body between them.


Width, Height and ScrollableBody: this text is long enough to scroll inside the card instead of spilling out of it, so the layout around it stays where it is.

MinWidth and MaxWidth: never narrower than 10rem, never wider than 18rem.


FullSize fills its grid cell.

So a card with more to say makes the whole row taller, and every card in the row follows it.

One height for all.


FullWidth: as wide as its container.

Header

Title and Subtitle make the header, led by IconName (or Icon). HeadingLevel (1-6) turns the title into a real heading, so screen reader users can jump from card to card. IconTemplate replaces only the leading icon - an avatar, a logo - while HeaderTemplate replaces the whole header text.


bit BlazorUI
Native Blazor components

A title and a subtitle.

Deployment
Succeeded 2 minutes ago

An icon, and a title that is a level-3 heading.

Ada Lovelace
Author

An IconTemplate keeps the title and subtitle.

Ada Lovelace
Author

A HeaderTemplate replaces the icon, title and subtitle.

Actions & Footer

Actions sits at the end of the header, Footer under the body and FloatingActions over the top corner of the card. Their clicks never reach the card itself, and they stay usable on a linked card. Divider draws a hairline between the header, the body and the footer.


Weekly report
Updated an hour ago

Actions beside the title, the footer under the body.

Weekly report
Updated an hour ago

The same card with a Divider.

The star floats over the corner. Starred: False

Cover

ImageUrl puts a full-bleed picture on top, cropped by ImageHeight or by CoverRatio (which stays level as the card narrows) and framed by ImagePosition. It is decorative unless ImageAlt describes it, and ImageLoading can defer it. Cover takes any markup instead, and Reversed moves the cover under the content. CoverOverlay, which lays the cover behind the content, needs a scrim to keep its text readable, so it is shown under CSS variables, where the scrim is introduced.


Mount Rainier
Washington, USA

ImageHeight crops it; ImagePosition keeps the top of the frame.

Widescreen
A 16 / 9 cover

CoverRatio keeps its ratio at any width.

Caption first
A cover under the content

Reversed puts the picture last.

bit BlazorUI
Custom cover
Any markup you like

The Cover template takes the place of the image.

Horizontal

Horizontal puts the cover beside the content, a third of the card wide unless CoverWidth says otherwise; Reversed moves it to the end. The layout mirrors in right-to-left.


Mount Rainier
Washington, USA

A thumbnail and a summary on one row.

Mount Rainier
A narrower cover

CoverWidth pins the thumbnail width.

Mount Rainier
A trailing cover

Reversed puts the thumbnail after the words.

Click & Selection

OnClick stretches a native button over the card, named by its Title: focusable, pressed by Enter and Space, shaded under the pointer. Actions, Footer and FloatingActions stay separate controls above it. Binding Selected makes it a toggle (aria-pressed and a ring). IsEnabled="false" disables it; StopPropagation keeps the click from its ancestors.


Clickable

Clicked 0 times.

Disabled

Answers nothing.

Backups
$4 / month

Selected: True

Monitoring
$6 / month

Selected: False

Link

Href stretches a link over the card, named by its Title and described by its Subtitle (or named by an AriaLabel). Controls in Actions, Footer and FloatingActions stay above it. Target, Rel and Download reach the link; _blank adds noopener.


bit BlazorUI
blazorui.bitplatform.dev

The whole card is the link; the pin is not. Pinned: False

GitHub(opens in a new tab)

Loading

Loading swaps the body for a placeholder and marks the card aria-busy; the header stays. LoadingTemplate brings a placeholder of your own.



Weekly report
Updated an hour ago
Custom placeholder

Elevation & Hover

Elevation picks a level of the theme's shadow ramp (0-24) and lifts from it on hover. NoShadow flattens the card, and Hoverable lifts a card that is not clickable under the pointer.


4

Elevation
Level 4
NoShadow
A flat surface
Hoverable
Hover me

Appearance

Outlined trades the shadow for a border, and Border draws one in the color you pick. Background picks the surface color, Square drops the corner radius and NoPadding removes the inset.


Outlined
Border
Tertiary, no shadow
Square

NoPadding: the content touches the edges.


Primary
Secondary
The default
Tertiary
Transparent

Accessibility

Wrap a run of cards in a named list and give their titles a HeadingLevel. A linked or clickable card is then read as its title, described by its subtitle, with its actions as separate controls. An AriaLabel gives a plain card the group role; a splatted option, tab or row role makes the card itself the control and reports aria-selected, while a structural one such as listitem keeps the stretched button. Loading sets aria-busy. Focus rings are drawn inside the card, and forced-colors mode restores its border.


  • Theming
    5 min read

    Tokens, presets and dark mode.

  • Iconography
    3 min read

    Built-in and external icons.

  • Release notes

CSS variables

The public --bit-Card-* variables (see the CSS variables table) restyle every card at once. They inherit, so set them on :root, on any ancestor - a plain element, as here - or on one card's Style. A parameter set on the card still wins, and a disabled card keeps the disabled colors.


Soft
Rounder, flat, outlined
Same look
From the same ancestor
Border wins
A parameter beats the variable

Brand
Custom colors

A body under a divider.

A footer
Selectable
Amber ring, indigo hover

Olympic National Park
Washington, USA

A CoverOverlay card, read against the scrim set on its own Style.

Cascading parameters

BitParams hands a BitCardParams to every card under it, so a grid sets its shared look once. It is a default, not an override: the last card keeps its own Size.


Inbox
12 unread

Outlined, small, divided.

Calendar
3 events today

The same, from BitParams.

Tasks
5 due

Keeps its own Size.

Color

Color paints the card in a theme role and Variant decides how: Fill (the default) paints the surface, Outline the border and the text, Text tints the surface. A disabled card uses the role's disabled colors.


Primary
Fill
Primary
Outline
Primary
Text

Secondary
Fill
Secondary
Outline
Secondary
Text

Tertiary
Fill
Tertiary
Outline
Tertiary
Text

Info
Fill
Info
Outline
Info
Text

Success
Fill
Success
Outline
Success
Text

Warning
Fill
Warning
Outline
Warning
Text

SevereWarning
Fill
SevereWarning
Outline
SevereWarning
Text

Error
Fill
Error
Outline
Error
Text

PrimaryBackground
SecondaryBackground
TertiaryBackground

PrimaryForeground
SecondaryForeground
TertiaryForeground

PrimaryBorder
SecondaryBorder
TertiaryBorder

Disabled:

Primary
Fill
Success
Outline
Error
Text

External Icons

Icon takes a BitIconInfo from an external library such as FontAwesome or Bootstrap Icons; the glyph is sized to the title beside it.


FontAwesome:

House
fa-solid fa-house
GitHub
fa-brands fa-github
Rocket
fa-solid fa-rocket

Bootstrap:

House
bi bi-house-fill
GitHub
bi bi-github
Gear
bi bi-gear-fill

Size

Size scales the padding, the gaps and the header type together. Medium is the default.


Small
A tight card

Small padding, small type.

Medium
The default

Medium padding, medium type.

Large
A roomy card

Large padding, large type.

Style & Class

Style and Class land on the root; Styles and Classes reach each part - the link, the floating actions, the cover and its image, the main column, the header with its icon, text, title and subtitle, the actions, the body, the footer and the selected state.


Styled card

Classed card


Styles
Per-part inline styles

Every part can be styled on its own.

Classes
Per-part CSS classes

And every part can take a class.

RTL

Use Dir="BitDir.Rtl" to mirror the whole card: the icon, the actions and a horizontal cover all swap sides.


کارت
یک زیرعنوان

بیت بلیزور یو آی، کامپوننت‌های بومی، قابل تنظیم و ...

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitCard CSS variables

Name Default value Description
--bit-Card-color --bit-clr-fg-pri Text color. A Color on the card wins over it.
--bit-Card-background --bit-clr-bg-sec Background. A Background or a Color on the card wins over it.
--bit-Card-border-color --bit-clr-brd-pri Border color, on every card that draws a border. A Border or a Color on the card wins over it.
--bit-Card-border-width 0; --bit-shp-brd-width on an Outlined card or one given a Border Border width. Set on its own it draws a border around every card.
--bit-Card-radius --bit-shp-radius-surface Corner radius. Square wins over it.
--bit-Card-shadow --bit-shd-card Resting shadow. Elevation, NoShadow and Outlined win over it.
--bit-Card-hover-shadow --bit-shd-card-hover Shadow of a clickable, linked or Hoverable card under the pointer. An Elevation wins over it.
--bit-Card-active-shadow The resting shadow Shadow of a clickable or linked card while pressed.
--bit-Card-hover-background The resting background washed 5% with the text color Background of a clickable or linked card under the pointer. A Fill card uses its role's hover shade instead.
--bit-Card-active-background The resting background washed 10% with the text color Background of a clickable or linked card while pressed. A Fill card uses its role's pressed shade instead.
--bit-Card-padding --bit-spa-card-{sm,md,lg}, per Size Inset of the card and of each of its parts. NoPadding wins over it.
--bit-Card-gap Per Size Room between the parts, and between the header icon, text and actions.
--bit-Card-title-font-size Per Size Title text size.
--bit-Card-title-font-weight --bit-tg-fw-semibold Title text weight.
--bit-Card-subtitle-font-size Per Size Subtitle text size.
--bit-Card-subtitle-color --bit-clr-fg-sec Subtitle color. A card painted by a Color, or disabled, gives the subtitle its own text color instead.
--bit-Card-icon-size --bit-siz-icon-{sm,md,lg}, per Size Size of the header icon.
--bit-Card-divider-color --bit-clr-brd-sec Color of the Divider hairlines.
--bit-Card-selected-color --bit-clr-pri Color of the Selected ring. A Fill card draws it in its own text color instead.
--bit-Card-focus-color The text color Color of the keyboard focus ring, on the card and on the link of a linked card.
--bit-Card-cover-width 33% Width of the cover of a Horizontal card. CoverWidth wins over it.
--bit-Card-scrim none A layer painted over a CoverOverlay picture and under the content, such as a dark gradient, so the text over it stays readable.

API

Every parameter, public member, sub-class and enum this component exposes.

BitCard parameters

Name Type Default value Description
Actions RenderFragment? null Content at the end of the header, for what acts on the whole card (a menu, a dismiss button). Its clicks never reach the card, and it stays above the link of a linked card.
Background BitColorKind? null The neutral surface color of the card. Unset, the card reads --bit-Card-background, then the theme's secondary background.
Border BitColorKind? null Draws a border in one of the neutral border colors. Wins over the color Outlined asks for.
ChildContent RenderFragment? null The content of the card: the whole padded box on a plain card, the body on one with a cover, a header or a footer.
Classes BitCardClassStyles? null Custom CSS classes for different parts of the card.
Color BitColor? null Paints the card in a theme role, the way the Variant asks for. Unset, the card stays a neutral surface.
Cover RenderFragment? null Full-bleed media at the top of the card (a chart, a carousel, a video), clipped to its corners. Takes precedence over ImageUrl.
CoverOverlay bool false Lays the cover behind the content, filling the card. Give the card a Height or MinHeight, and a --bit-Card-scrim so its text stays readable.
CoverRatio string? null The aspect ratio of the cover, as a CSS ratio such as 16 / 9. Keeps a row of cards level at any width.
CoverWidth string? null The width of the cover of a Horizontal card. Unset, it reads --bit-Card-cover-width, then a third of the card.
Divider bool false Draws a hairline between the header, the body and the footer - only between parts, never on the outer edge.
Download string? null The download attribute of the link of a card that has an Href.
Elevation int? null A level of the theme's shadow ramp (0-24, --bit-shd-0 to --bit-shd-24) the card rests at and lifts from on hover. 0 is flat.
FloatingActions RenderFragment? null Content floated over the top corner of the card, above everything else - a favorite toggle or a selection box on a picture card. Its clicks never reach the card.
Footer RenderFragment? null Content under the body, for the actions a reader takes. Its clicks never reach the card, and it stays above the link of a linked card.
FullHeight bool false Makes the card height 100% of its parent container.
FullSize bool false Makes the card width and height 100% of its parent container.
FullWidth bool false Makes the card width 100% of its parent container.
HeaderTemplate RenderFragment? null Replaces the icon, the title and the subtitle; Actions still renders beside it. A linked or clickable card with one is named by its body; an AriaLabel says it shorter.
HeadingLevel int? null Makes the title a heading of this level (1-6). Ignored under a splatted role that presents its children, such as option or tab.
Height string? null Sets the height of the card explicitly.
Horizontal bool false Lays the cover beside the content instead of above it.
Hoverable bool false Lifts the card under the pointer. A clickable or linked card lifts on its own.
Href string? null Stretches a link to this URL over the whole card, named by the AriaLabel, an aria-labelledby, the Title, the Subtitle (which describes a link the Title names) or the body, or else by all the card says. Actions, Footer and FloatingActions stay above it; the rest of the card is under it.
Icon BitIconInfo? null The header icon from an external library. Takes precedence over IconName.
IconName string? null The name of the header icon from the built-in Fluent UI icons.
IconTemplate RenderFragment? null Replaces only the header icon (an avatar, a logo) and keeps the Title and the Subtitle beside it.
ImageAlt string? null The alternate text of the cover image. Unset, the image is decorative (an empty alt) and skipped by screen readers.
ImageHeight string? null The height of the cover image, which is cropped to fill it rather than stretched.
ImageLoading BitImageLoading? null The loading behavior of the cover image, eager or lazy.
ImagePosition string? null Which part of a cropped cover image stays in frame, as a CSS object-position such as top or 50% 20%.
ImageUrl string? null The URL of the cover image at the top of the card.
Loading bool false Swaps the body for a placeholder and marks the card aria-busy. The header keeps rendering.
LoadingTemplate RenderFragment? null A custom placeholder for the body while Loading is set.
MaxHeight string? null Sets the maximum height of the card.
MaxWidth string? null Sets the maximum width of the card.
MinHeight string? null Sets the minimum height of the card.
MinWidth string? null Sets the minimum width of the card.
NoPadding bool false Removes the inset of the card and of all its parts.
NoShadow bool false Removes the resting shadow. The card still lifts on hover when it is clickable, linked or Hoverable.
OnClick EventCallback<MouseEventArgs> Stretches a native button over the card, named like the link of Href, so the title stays a heading and Actions, Footer and FloatingActions stay separate controls. The button lets the pointer through, so the body still scrolls and its controls still answer the pointer. Under a splatted widget role (option, tab, row) the card itself is the control; a structural one (listitem, article) keeps the button.
Outlined bool false Trades the shadow for a border. An explicit Border still decides its color.
Rel BitLinkRels? null The rel attribute of the link of a card that has an Href. A Target of _blank always adds noopener.
Reversed bool false Puts the cover after the content: under the body, or at the end of a Horizontal card.
ScrollableBody bool false Scrolls content that outgrows a bounded height; on a card with a header and a footer only the body scrolls.
Selected bool false Draws the selection ring. Binding it makes the card a toggle whose button reports aria-pressed, or aria-selected under a splatted option, row, gridcell, tab or treeitem role, or aria-checked under a splatted checkbox, switch or radio role.
Size BitSize? null Scales the padding, the gaps and the header type together.
Square bool false Removes the corner radius.
StopPropagation bool false Stops the click of the card from reaching its ancestors.
Styles BitCardClassStyles? null Custom CSS styles for different parts of the card.
Subtitle string? null The second line of the header, under the title.
Target string? null The target attribute of the link of a card that has an Href.
Title string? null The first line of the header. It also names the link of a linked card.
Variant BitVariant? null How a Color is applied: Fill (the default) paints the surface, Outline the border, Text tints the surface; the last two write in the role's readable foreground shade. Ignored without a Color.
Width string? null Sets the width of the card explicitly.

BitCard public members

Name Type Default value Description
FocusAsync ValueTask Focuses the card: the stretched link or button of a linked or clickable card, or else the root of one given a role or a TabIndex.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitCardClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitCard.
Link string? null Custom CSS classes/styles for the stretched link (Href) or button (OnClick) that covers the card.
FloatingActions string? null Custom CSS classes/styles for the slot floated over the corner of the BitCard.
Cover string? null Custom CSS classes/styles for the full-bleed media area at the head of the BitCard.
Image string? null Custom CSS classes/styles for the image rendered from the ImageUrl of the BitCard.
Main string? null Custom CSS classes/styles for the element that holds the header, the body and the footer of the BitCard.
Header string? null Custom CSS classes/styles for the header of the BitCard.
Icon string? null Custom CSS classes/styles for the leading icon of the header of the BitCard.
HeaderText string? null Custom CSS classes/styles for the element that holds the title and the subtitle of the BitCard.
Title string? null Custom CSS classes/styles for the title of the BitCard.
Subtitle string? null Custom CSS classes/styles for the subtitle of the BitCard.
Actions string? null Custom CSS classes/styles for the actions rendered at the trailing edge of the header of the BitCard.
Body string? null Custom CSS classes/styles for the body of the BitCard, which is what the ChildContent renders into.
Footer string? null Custom CSS classes/styles for the footer of the BitCard.
Selected string? null Custom CSS classes/styles for the root element of the BitCard while it is selected.

BitIconInfo properties

Name Type Default value Description
Name string? null Gets or sets the name of the icon.
BaseClass string? null Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix string? null Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitColorKind enum

Name Value Description
Primary 0 The primary color kind.
Secondary 1 The secondary color kind.
Tertiary 2 The tertiary color kind.
Transparent 3 The transparent color kind.

BitColor enum

Name Value Description
Primary 0 Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.

BitImageLoading enum

Name Value Description
Eager 0 The default behavior of the browser: the image is fetched as soon as the img element is processed.
Lazy 1 The image is fetched only once the browser estimates that it is about to be needed.

BitSize enum

Name Value Description
Small 0 The small size.
Medium 1 The medium size.
Large 2 The large size.

BitVariant enum

Name Value Description
Fill 0 Fill styled variant.
Outline 1 Outline styled variant.
Text 2 Text styled variant.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.