Cards

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

Examples (anchor)

Base values for default font properties are expected via reset styles so are not included, the typography provides these if required but the styles should work with any reset/normalize document used.

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.

Default light

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

Default dark

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

Link light

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

Link dark

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

Examples HTML

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

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

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

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