Card

Default

<div class="card">
	<div class="card-body">
		<h3 class="card-title h5">Card title</h3>
		<p class="card-subtitle h6">Card Subtitle</p>
		<p class="mb-0">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</p>
	</div>
</div>

Card header

<div class="card">
	<div class="card-header">
		<h3 class="card-title h5">Card title</h3>
		<p class="card-subtitle h6">Card subtitle</p>
	</div>
	<div class="card-body">
		<p class="mb-0">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</p>
	</div>
</div>

Action

Use native links or buttons for actionable cards. Reserve .card-action for custom controls with equivalent keyboard behavior.

<a class="card hover-shadow" href="/details">
	<div class="card-body">Hover or focus me!</div>
</a>

CSS Variables

Override these variables on the component or an ancestor.

--card-header-padding: var(--spacer-3) var(--spacer-3) 0 var(--spacer-3);
--card-header-border-bottom-width: 0;
--card-header-border-bottom-color: var(--card-border-color);
--card-body-padding-top-after-header: var(--spacer-1);
--card-body-padding: var(--spacer-3);
--card-bg-color: var(--bg-surface);
--card-border-width: var(--border-width);
--card-border-color: var(--border-color);
--card-border-radius: var(--border-radius);
--card-bg-hover-color: var(--bg-surface-hover);
--card-title-spacer-y: var(--spacer-2);
--card-subtitle-color: var(--text-muted);
--card-transition-duration: var(--transition-duration, 0.2s);
--card-transition-easing: var(--transition-easing);