Cards

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

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">
  <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">
  <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">
  <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>

Link cards

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

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">
  <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">
  <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">
  <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 then include the Sass mixin anywhere below.

custom.scss

@use "sassmods/scss/sassmods" as *;
@include cards-css;

See customizing for information about using the Sass and CSS variables in the source code (see below) to customize the styles, and Sass variables (on the using SassMods page) for other ways to use the variables to create custom styles.

Source

_cards.scss

// ---------------------------------------------------------- 
// 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, 0.188rem) !default;
$card-background-color:       var(--card-bg) !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: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: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