Cards

Basic container styles for creating basic cards including a link card component.

Examples (anchor)

Please note. The cards will inherit whatever normalize/reset styles are present requiring only minor adjustments to suit base font property values, but as demonstrated they've been designed to work seamlessly with the StyleMods content styles.

Default (anchor)

The .card class adds the border, padding and adjusts the margins of content within the card.

Elephant with ears flared looking directly at camera.

Default card

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

Link to action

Default card

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

Link to action

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

Examples HTML 
<div class="card">
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <h3>Default card</h3>
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
</div>

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

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

The .card-link applies the same styles but adapts the card in a focusable link.

Elephant with ears flared looking directly at camera.

Link card

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

Link to action

Link card

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

Link to action

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

Examples HTML 
<div class="card-link">
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <h3>Link card</h3>
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
</div>

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

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

Card body (anchor)

For flush images add other content within a .card-body inside a .card container.

Elephant with ears flared looking directly at camera.

Card body

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

Link to action
Elephant with ears flared looking directly at camera.

Link card

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

Link to action
Examples HTML 
<div class="card">
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <div class="card-body">
  <h3>Card body</h3>
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
  </div>
</div>

<div class="card-link">
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <div class="card-body">
  <h3>Link card</h3>
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
  </div>
</div>

Two or more .card-body can be used and applied directly to a heading element if required.

Body title

Elephant with ears flared looking directly at camera.

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

Link to action

Link card

Elephant with ears flared looking directly at camera.

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

Link to action
Examples HTML 
<div class="card">
  <h3 class="card-body">Body title</h3>
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <div class="card-body">
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
  </div>
</div>

<div class="card-link">
  <h3 class="card-body">Link card</h3>
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <div class="card-body">
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
  </div>
</div>

The .card-body can also be used just with a heading and an image for thumbnail-type link cards:

Elephant with ears flared looking directly at camera.

Link card

Link card

Elephant with ears flared looking directly at camera.
Examples HTML 
<div class="card-link">
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <h4 class="card-body"><a href="#">Link card</a></h4>
</div>

<div class="card-link">
  <h4 class="card-body"><a href="#">Link card</a></h4>
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
</div>

Card titles (anchor)

The .card-title class combines with the .card-body style for banner style card titles.

Card title

Elephant with ears flared looking directly at camera.

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

Link to action

Card title

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

Link to action
Examples HTML 
<div class="card">
  <h4 class="card-title">Card title</h4>
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <div class="card-body">
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
  </div>
</div>

<div class="card">
  <h4 class="card-title">Card title</h4>
  <div class="card-body">
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
  </div>
</div>

The styles work the same if using the .card-link option:

Link card

Elephant with ears flared looking directly at camera.

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

Link to action

Link card

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

Link to action
Examples HTML 
<div class="card-link">
  <h4 class="card-title">Link card</h4>
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <div class="card-body">
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
  </div>
</div>

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

The .card-title can also be used just with a heading and an image for thumbnail-type link cards.

Elephant with ears flared looking directly at camera.

Link card

Link card

Elephant with ears flared looking directly at camera.
Examples HTML 
<div class="card-link">
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
  <h4 class="card-title"><a href="#">Link card</a></h4>
</div>

<div class="card-link">
  <h4 class="card-title"><a href="#">Link card</a></h4>
  <img src="/img/elephant-480.webp" class="object-cover ratio-16x9" alt="Elephant with ears flared looking directly at camera.">
</div>

Fixed light and dark (anchor)

The light and dark class modifiers work with all the card options above.

Card title

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

Link to action

Link card

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

Link to action

Card title

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

Link to action

Link card

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

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

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

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

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

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss 
@use "stylemods/scss" as *;
@include cards-css;

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-cards: true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss 
@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information including how the styles can also be compiled within cascade layers.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

cards.scss 
// ---------------------------------------------------------- 
// Cards
// ----------------------------------------------------------
$card-text-color:               var(--card-text, CanvasText) !default;
$card-text-margin-bottom:       var(--card-text-mb, 0.5rem) !default; // paragraphs & lists
$card-padding-block:            var(--card-py, 1rem) !default;
$card-padding-inline:           var(--card-px, 1rem) !default;
$card-border-color:             var(--card-bd-color, color-mix(in srgb, CanvasText 15%, Canvas)) !default;
$card-radius:                   var(--card-radius, 0.188rem) !default;
$card-background-color:         var(--card-bg, Canvas) !default;
$card-title-background:         var(--card-title-bg, color-mix(in srgb, CanvasText 4%, Canvas)) !default;
$card-link-hover-text-color:    var(--card-text-hover, CanvasText) !default;
$card-link-hover-background:    var(--card-hover, color-mix(in srgb, CanvasText 4%, Canvas)) !default;
$card-link-focus-width:         var(--card-focus, 0.188rem) !default;
$card-link-focus-color:         var(--card-focus-color, color-mix(in srgb, CanvasText 15%, Canvas)) !default;
$card-link-img-hover-filter:    var(--card-img-hover, opacity(75%)) !default;
$card-inner-radius:             calc($card-radius - 1px) !default;
$card-title-padding-block:      calc($card-padding-block - 0.125em) !default;
$card-image-margin-top:         calc($card-text-margin-bottom + 0.5rem) !default;
$card-image-margin-bottom:      calc($card-text-margin-bottom + 0.25rem) !default;

@mixin cards-css {

:where(.card, .card-link) {
  color: $card-text-color; 
  max-inline-size: var(--card-width); 
  padding-block: $card-padding-block;
  padding-inline: $card-padding-inline;
  border: 1px solid $card-border-color;
  border-radius: $card-radius;
  background-color: $card-background-color;
}

:where(.card-link) {
  position: relative;
}

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

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

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

:where(.card-link:is(:focus-within, :hover)) img {
  filter: $card-link-img-hover-filter;
}

:where(.card-link:focus-within) {
  outline: $card-link-focus-width solid $card-link-focus-color;
}

:where(.card, .card-link) :is(p, ol, ul, dl)  {
  margin-block-end: $card-text-margin-bottom;
}

:where(.card, .card-link) :is(:last-child)  {
  margin-block-end: 0;
}

:where(.card, .card-link):has(.card-title, .card-body) {
  padding: 0;
}

.card-body {
  padding-block: $card-padding-block;
  padding-inline: $card-padding-inline;
}

.card-body:is(h1, h2, h3, h4, h5, h6) {
  margin-block-end: 0;
}

.card-title {
  margin-block-end: 0;
  padding-block: $card-title-padding-block;
  padding-inline: $card-padding-inline;
  border-block-end: 1px solid $card-border-color;
  border-start-start-radius: $card-inner-radius;
  border-start-end-radius: $card-inner-radius;
  background-color: $card-title-background;
}

img + .card-title, .card-body + .card-title {
  border-block-start: 1px solid $card-border-color;
  border-radius: 0;
}

:where(.card, .card-link) .card-title:is(:last-child) {
  border-block-end: none;
  border-end-start-radius: $card-inner-radius;
  border-end-end-radius: $card-inner-radius;
}

.card-title:is(strong:not(p + strong)) {
  display: block;
}

:where(.card, .card-link) img {
  margin-block-end: $card-image-margin-bottom;
}

:where(.card, .card-link) * + img:not(.card-title + img, .card-body + img) {
  margin-block-start: $card-image-margin-top;
}

:where(.card, .card-link):has(.card-title, .card-body) img:not(.card-body img) {
  margin-block-end: 0;
}

:where(.card, .card-link):has(.card-title, .card-body) img:not(.card-body img):first-child {
  border-start-start-radius: $card-inner-radius;
  border-start-end-radius: $card-inner-radius;
}

:where(.card, .card-link):has(.card-title, .card-body) img:last-child {
  border-end-start-radius: $card-inner-radius;
  border-end-end-radius: $card-inner-radius;
}

// Color-scheme
.card-light {
  color-scheme: light;
}

.card-dark {
  color-scheme: dark;
}

} // end cards-css