Card

Usage

Cards use the standard HTML <article> element. Add a color class to apply a colored variant with a tinted background.

<article class="card-primary">
	<header>Card title</header>
	Card body content.
	<footer>Card footer</footer>
</article>

A card can contain any combination of <header>, body content, and <footer>. All three sections are optional.

Body only

<article class="card-info">
	<p>A simple card with content only, no header or footer.</p>
</article>

Default card (no color)

Without a color class, <article> renders with the standard card styling:

<article>
	<header>Standard card</header>
	This card uses the default styling without any color class.
	<footer>Footer</footer>
</article>

Color variants

11 color classes are available, matching the µCSS color roles:

All 11 variants example

<div class="row">
	<div class="col-12 col-md-6">
		<article class="card-primary">
			<header>Primary</header>
			Card body with primary accent.
			<footer>Card footer</footer>
		</article>
	</div>
	<div class="col-12 col-md-6">
		<article class="card-secondary">
			<header>Secondary</header>
			Card body with secondary accent.
			<footer>Card footer</footer>
		</article>
	</div>
	<div class="col-12 col-md-6">
		<article class="card-success">
			<header>Success</header>
			Card body with success accent.
			<footer>Card footer</footer>
		</article>
	</div>
	<div class="col-12 col-md-6">
		<article class="card-error">
			<header>Error</header>
			Card body with error accent.
			<footer>Card footer</footer>
		</article>
	</div>
</div>

Visual structure

Colored cards (article[class*="card-"]) apply the following styles:

• Background: the card's light background tint.
• Header/footer background: a color-mix() blend of 12% card color into the card background, creating a subtle shading difference.
• Header border-bottom / footer border-top: color-mix() blend of 20% card color, providing a gentle separator.

Implementation note

µCard includes one global fix:

article > *:last-child:not(header):not(footer) {
	margin-bottom: 0;
}

This removes the bottom margin on the last content element inside a card (e.g., a <p> tag), preventing unwanted spacing before the card's bottom edge or footer. This is necessary because the base styles apply default margins to <p> elements.

CSS classes reference

Accessibility

• The <article> element is a semantic landmark -- screen readers announce it as an article.
• Always include a heading (<h2>--<h6>) inside the card for screen reader navigation.
• Card <header> and <footer> are announced as part of the article structure.
• For clickable cards, make the heading link the primary interactive element rather than wrapping the entire card in <a>.