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>

Link cards (anchor)

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

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.

Card body

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

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

Link card

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

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

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.

Link card

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)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

custom.scss

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

Source code (anchor)

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

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