Cards

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

Examples (anchor)

The card styles can be customized before compiling using Sass or in real-time with CSS variables.

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." width="400">
  <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." width="400">
  <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." width="400">
  <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." width="400">
  <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." width="400">
  <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." width="400">
  <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." width="400">
  <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." width="400">
</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." width="400">
  <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." width="400">
  <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." width="400">
  <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." width="400">
</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" style="--para-tw:auto;">
  <h4>Card title</h4>
  <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">
  <h4>Link card</h4>
  <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">
  <h4>Card title</h4>
  <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">
  <h4>Link card</h4>
  <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.

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.

Source code (anchor)

The Cards source file is included with the components module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source document: stylemods/scss/components/cards.scss
View on Github: https://github.com/pmbrown/StyleMods/blob/main/scss/components/cards.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.