Cards

Basic card utilities that can be customized with variables globally or inline.

Examples

Default cards

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
Forest covered in snow with sunset filtering between tall trees.

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" style="--card-width:18rem;">
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#2">Link to action</a>
</div>

<div class="card" style="--card-width:18rem;">
  <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="#2">Link to action</a>
</div>

<div class="card" style="--card-width:18rem;">
  <img src="/img/docs/winter-forest-480.webp" width="480" alt="Forest covered in snow with sunset filtering between tall trees.">
  <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="#5">Link to action</a>
</div>

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
Forest covered in snow with sunset filtering between tall trees.

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" style="--card-width:18rem;">
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#3">Link to action</a>
</div>

<div class="card-link" style="--card-width:18rem;">
  <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="#3">Link to action</a>
</div>

<div class="card-link" style="--card-width:18rem;">
  <img src="/img/docs/winter-forest-480.webp" width="480" alt="Forest covered in snow with sunset filtering between tall trees.">
  <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="#6">Link to action</a>
</div>

Using the module

Add the sassmods.scss to your custom styles as below, use the Sass variables from the module's source code (see below) to customize the default property values if required, then include the Sass mixin anywhere below.

@use "sassmods/scss/sassmods" as *;
$card-padding-block: 0.25rem; // example
$card-padding-inline: 0.5rem; // example

@include cards-css;

Using the framework

Enable the module in the sassmods-system.scss document as below, if required customize the styles or the Sass variables for the default property values directly in the source code (see below).

$enable-cards: true;

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins using Sass variables provided for the core property values that can be customized as described above.

_cards.scss

Use the property specific CSS variables to create root level variables for global styles and/or editing inline, or change all the values to suit your own parameters.

// ---------------------------------------------------------- 
// Cards
// ----------------------------------------------------------
$card-text-color:             var(--card-text, inherit) !default; 
$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 12%, Canvas)) !default;
$card-radius:                 var(--card-radius) !default;
$card-background-color:       var(--card-bg, Canvas) !default;
$card-link-hover-text-color:  var(--card-text-hover, inherit) !default;
$card-link-hover-background:  var(--card-hover, color-mix(in srgb, CanvasText 3%, 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 12%, Canvas)) !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, .card-link) * {
  text-align: var(--card-align, initial);
  text-wrap: var(--card-wrap, initial);
}

:where(.card, .card-link) p:not(:last-child) {
  margin-block-end: var(--card-p-mb, 0.5rem);
}

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

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

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

.card-link a:before {
  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:focus-within) {
  outline: #{$card-link-focus-width} solid #{$card-link-focus-color};
}

:where(.card, .card-link) img {
  display: block;
  max-inline-size: 100%;
  object-fit: cover;
  aspect-ratio: var(--img-ratio, auto);
  block-size: 100%;
  margin-block-end: var(--card-img-mb, 0.75rem);
}

} // end cards-css