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.

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.

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>

Card lists (anchor)

Card list group and list group links for use with card titles, see list-groups for list groups without card title.

Card list

List item 1
List item 2
List item 3

Card list links

Example HTML

<div class="card">
<h4 class="card-title">Card list</h4>
  <ul class="card-list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

<div class="card">
<h4 class="card-title">Card list links</h4>
  <ul class="card-list-links">
    <li><a href="#">List link 1</a></li>
    <li><a href="#">List link 2</a></li>
    <li><a href="#">List link 3</a></li>
  </ul>
</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 default cards property values can be customized in the properties.scss document. The styles can be customized in the _cards.scss document in the [styles/components] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Properties

$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.188rem !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;

Styles

// ---------------------------------------------------------- 
// Cards
// ----------------------------------------------------------
@use "../../configuration" as *;

@if $enable-cards {

:where(.card-basic, .card-link) {
  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-link) {
  position: relative;
}

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

.card-link a:before {
  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;
}

: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);
}

:where(.card-body, .card-list, .card-list-links) {  
  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, .card-list-links) {
  --marker: '';
  --pl: 0;
  --mb: 0;
}

:where(.card-list li, .card-list-links li a) {
  padding-block: var(--card-title-py);
  padding-inline: var(--card-px);
}

:where(.card-list, .card-list-links) li:not(:last-child) {
  border-block-end: 1px solid var(--card-bd-color);
}

:where(.card-list-links li a) {
  display: block;
}

:where(.card-list-links a:is(:hover, :focus)) {
  background-color: var(--card-hover);
}

:where(.card-list-links *:last-child a:is(:hover, :focus)) {
  --card-list-hover: calc(var(--card-radius) - 1px);
  border-radius: 0 0 var(--card-list-hover) var(--card-list-hover);
}

// Card 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);
}

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

.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]