Skip to content

Cards

Customizable stylised card components designed consistently with Themalize styles, disabled by default, enable with $enable-cards: true; in the configuration.scss document.

Basic and link cards (anchor)

Simple wrapper styles with minimal internal styling.

Basic card

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Example HTML

<div class="card-basic">
  <h2>Basic card</h2>
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
</div>
<div class="card-basic">
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
</div>

Link card

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Example HTML

<div class="card-link">
  <h2><a href="#">Link card</a></h2>
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
</div>
<div class="card-link">
  <p>The <a href="#">quick brown fox</a> jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
</div>

Card titles (anchor)

Cards titles with heading and paragraph tags have margin removed for title styling. Block padding within titles may require adjusting when using different font-families.

Heading 1

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Heading 2

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Heading 3

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Heading 4

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Heading 5

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Heading 6

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Paragraph

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Strong

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Example HTML

<div class="card">
  <h1 class="card-title">Heading 1</h1>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card">
  <h2 class="card-title">Heading 2</h2>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card">
  <h3 class="card-title">Heading 3</h3>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card">
  <h4 class="card-title">Heading 4</h4>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card">
  <h5 class="card-title">Heading 5</h5>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card">
  <h6 class="card-title">Heading 6</h6>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card">
  <p class="card-title">Paragraph</p>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card">
  <strong class="card-title">Strong</strong>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>

Colors (anchor)

With $enable-theme-colors: true;

Light

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Dark

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Example HTML

<div class="card card-light">
  <p class="card-title">Light</p>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card card-dark">
  <p class="card-title">Dark</p>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>

With $enable-primary-colors: true;

Blue

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Red

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Green

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Orange

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Cyan

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Example HTML

<div class="card card-blue">
  <p class="card-title">Blue</p>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card card-red">
  <p class="card-title">Red</p>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card card-green">
  <p class="card-title">Green</p>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card card-orange">
  <p class="card-title">Orange</p>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>
<div class="card card-cyan">
  <p class="card-title">Cyan</p>
  <div class="card-body">
    <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  </div>
</div>

Customize (anchor)

The cards core property values are provided as CSS variables that can be used to customize the styles inline. The values are compiled from Sass variables that can be customized in the properties.scss document when compiling.

Property values

$card-px:             1rem !default;
$card-pt:             0.75rem !default;
$card-pb:             1rem !default;
$card-bd-color:       var(--surf-2);
$card-bd-width:       1px !default;
$card-radius:         0.125em !default;
$card-bg:             var(--body-bg) !default;
$card-hover:          color-mix(in srgb, var(--surf-1) 50%, var(--body-bg)) !default;
$card-focus:          0.188rem solid var(--surf-3) !default;
$card-title-txt:      var(--text) !default;
$card-title-bg:       var(--surf-2) !default;  
$card-title-py:       0.5rem !default;
$card-title-h-py:     0.75rem !default;

The styles are regular CSS that can be customized in the _cards.scss document within the [styles/components] directory. The Sass @if rules control compiling depending on settings in the configuration.scss document.

Styles

@if $enable-cards {

:where(.card-basic, .card-link) {
  position: relative;
  max-inline-size: var(--card-max-width); 
  padding-block-start: var(--card-pt);
  padding-block-end: var(--card-pb);
  padding-inline: var(--card-px);
  border: var(--card-bd-width) solid var(--card-bd-color);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
}

:where(.card-basic :last-child, .card-link :last-child)  {
  --mb: 0;
}

.card-link a:after {
  content: "";
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
}

:where(.card-link :focus-visible) {
  outline: none;
}

:where(.card-link:is(:focus-within, :hover)) {
  background-color: var(--card-hover);
  cursor: pointer;
}

:where(.card-link:focus-within) {
  outline: var(--card-focus);
}

// Cards with headers

:where(.card, .card-sm) {
  max-inline-size: var(--card-max-width);
  background-color: var(--card-bg);
}

.card-sm {
  --card-px: .75rem;
  --card-title-h-py: .65rem;  
  --card-pt: .5rem;
  --card-pb: .75rem;
}

.card-sm * {
  font-size: var(--fs-sml);
}

.card-sm .card-body *:is(p, ul, ol, dl):not(:last-child) { 
  --mb: .5rem;
}

:where(.card-title) {
  @if $enable-icon-mixins or $enable-icon-styles {
    --ico: var(--card-title-txt);
  }
  color: var(--card-title-txt);
  display: block;
  padding-block: var(--card-title-py);
  padding-inline: var(--card-px);
  border-start-start-radius: var(--card-radius);
  border-start-end-radius: var(--card-radius);
  background-color: var(--card-title-bg);
}

:where(.card-title:is(h1, h2, h3, h4, h5, h6, p)) {
  --mb: 0;
}

:where(.card-title:is(h1, h2, h3, h4, h5, h6)) {
  padding-block: var(--card-title-h-py);
}

:where(.card-body) {
  padding-block-start: var(--card-pt);
  padding-block-end: var(--card-pb);
  padding-inline: var(--card-px);
  border: var(--card-bd-width) solid var(--card-bd-color);
  border-block-start: none;
  border-end-start-radius: var(--card-radius);
  border-end-end-radius: var(--card-radius);
}

:where(.card-body :last-child) {
  --mb: 0;
}

:where(.card-list) {
  --pl: 1rem;
}

// Card colors

@if $enable-theme-colors {

.card-light {
  --card-title-txt: #000;
  --card-title-bg: var(--surf-2-light);
  --card-bd-color: var(--card-title-bg);
}

.card-dark {
  --card-title-txt: #fff;
  --card-title-bg: var(--surf-2-dark);
  --card-bd-color: var(--card-title-bg);
}

} // END [if/theme-colors]

@if $enable-primary-colors {
.card-blue {
  --card-title-txt: #fff;
  --card-title-bg: var(--blue);
  --card-bd-color: var(--card-title-bg);
}

.card-red {
  --card-title-txt: #fff;
  --card-title-bg: var(--red);
  --card-bd-color: var(--card-title-bg);
}

.card-green {
  --card-title-txt: #fff;
  --card-title-bg: var(--green);
  --card-bd-color: var(--card-title-bg);
}

.card-orange {
  --card-title-txt: #000;
  --card-title-bg: var(--orange);
  --card-bd-color: var(--card-title-bg);
}

.card-cyan {
  --card-title-txt: #000;
  --card-title-bg: var(--cyan);
  --card-bd-color: var(--card-title-bg);
}

} // END [if/primary-colors]

} // END [if/cards]