Cards

Card container styles for displaying grouped content.

Source file: src/css/cards.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/cards.css

Included with:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css

Default (anchor)

Basic card

The quick brown fox jumps over the lazy dog.

Link to action

Link card

The quick brown fox jumps over the lazy dog.

Link to action

Example HTML

<div class="card">
  <h3>Basic card</h3>
  <p>The quick brown fox jumps over the lazy dog.</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.</p>
  <a href="#">Link to action</a>
</div>

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds.

Basic light

The quick brown fox jumps over the lazy dog.

Link to action

Link light

The quick brown fox jumps over the lazy dog.

Link to action

Basic dark

The quick brown fox jumps over the lazy dog.

Link to action

Link dark

The quick brown fox jumps over the lazy dog.

Link to action

Example HTML

<div class="card light">
  <h3>Basic light</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link light">
  <h3>Link light</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card dark">
  <h3>Basic dark</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link dark">
  <h3>Link dark</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

Primary colors (anchor)

The cards color classes use the primary colors variables, the source file is included separately.

Source file: src/css/colors/color-cards.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-cards.css

Included with:

ming.css
ming.min.css

Primary basic

The quick brown fox jumps over the lazy dog.

Link to action

Primary link

The quick brown fox jumps over the lazy dog.

Link to action

Success basic

The quick brown fox jumps over the lazy dog.

Link to action

Success link

The quick brown fox jumps over the lazy dog.

Link to action

Danger basic

The quick brown fox jumps over the lazy dog.

Link to action

Danger link

The quick brown fox jumps over the lazy dog.

Link to action

Info basic

The quick brown fox jumps over the lazy dog.

Link to action

Info link

The quick brown fox jumps over the lazy dog.

Link to action

Warning basic

The quick brown fox jumps over the lazy dog.

Link to action

Warning link

The quick brown fox jumps over the lazy dog.

Link to action

Secondary basic

The quick brown fox jumps over the lazy dog.

Link to action

Secondary link

The quick brown fox jumps over the lazy dog.

Link to action

Example HTML

<div class="card-primary">
  <h3>Primary basic</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link-primary">
  <h3>Primary link</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-success">
  <h3>Success basic</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link-success">
  <h3>Success link</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-danger">
  <h3>Danger basic</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link-danger">
  <h3>Danger link</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-info">
  <h3>Info basic</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link-info">
  <h3>Info link</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-warning">
  <h3>Warning basic</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link-warning">
  <h3>Warning link</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-secondary">
  <h3>Secondary basic</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link-secondary">
  <h3>Secondary link</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <a href="#">Link to action</a>
</div>

Previous: Button groups

Next: Dialogs