Card

The card module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

Quick overview

The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.

Quick start

To use the card module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the card module is heavily dependent on the grid module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Basic syntax

Card 1

This is a basic card with some sample content.

Card 2

This is another card with some sample content.

Card 3

This is one more card with some sample content.

To start using cards in your layout, you need to be somewhat familiar with the grid module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:

At the outermost level of the card layout syntax is a .row, which serves as a wrapper for all the cards inside it.
Inside the .row, cards are defined as <div> elements of the .card class.
Finally, inside the .cards, you can define sections using the .section class to wrap your content.

Note that cards will respond to screen changes, realigning themselves as necessary to fit on the page.

Sample code

<div class="row">
  <div class="card">
    <div class="section">
      <h3>Card Title</h3>
      <p>Card content...</p>
    </div>
  </div>
  <div class="card">
    <div class="section">
      <h3>Card Title</h3>
      <p>Card content...</p>
    </div>
  </div>
</div>

Notes

The card module is compatible with modern browsers, but might not display properly in older browsers.
If you want to further customize your .sections, check the section below.

<div class="card">
  <div class="section">
    <h3>Card Title</h3>
  </div>
  <div class="section">
    <p>Card content...</p>
    <p>More card content...</p>
  </div>
</div>

Do: You can add as many .sections as you like to a card.

<div class="card">
  <div class="section">
    <h3>Card Title</h3>
  </div>
  <p>Content not in a section!</p>
</div>

Don't: Avoid using cards with content inside them that is not wrapped in sections. Try to use a single .section to wrap the content inside these to avoid unexpected behavior.

<div class="card">
  <h3 class="section">Card Title</h3>
  <p class="section">Card content...</p>
</div>

Do: You can use the .section class for things other than <div> elements (e.g. <h1>-<h6>, <p>, <button>).

<div class="row">
  <div class="card">
  </div>
</div>
<div class="row">
  <div class="card">
  </div>
</div>

Don't: If you want to place multiple cards side by side, add them all inside the same .row. Placing cards inside different rows or not inside rows at all can result in unexpected behavior.

<div class="card">
    <div class="section row">
        <div class="card">
        </div>
    </div>
</div>
<!-- or -->
<div class="card">
    <div class="row">
        <div class="card">
        </div>
    </div>
</div>

Do: You can place .row elements inside .card elements, if you want. you should normally also make those rows into card .sections, but for this specific case you might want to make an exception sometimes.

<div class="card row">
</div>
<!-- or -->
<div class="card col-sm">
</div>

Don't: You should not have elements that are both cards and rows or columns at the same time.

Sections & media

Card with image

Content

Card with video

Normal section

Double-padded section

Normal section

Dark section

Darker section

You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of .section and .media to an <img> element or a video element of your choice (e.g. using a <iframe> element in the same manner). If you want a section to have more space around it, use the .double-padded class. There are also two section color variations: .dark and .darker.

Sample code

<div class="card">
  <img src="..." class="section media">
  <div class="section double-padded"><p>Content</p></div>
  <div class="section dark"><p>Content</p></div>
  <div class="section darker"><p>Content</p></div>
</div>

Notes

The .media class might not be well supported in older browsers, especially legacy versions of Internet Explorer.
Due to the .media class using object-fit, you might want to use a polyfill for better browser support, especially if you are targeting Microsoft browsers. We recommend this one for images and this one for videos.
Depending on the source website, some embedded videos might not display properly inside a .media section.
The .media class has a preset size of height: 200px. If you want to customize this, you should check the customization page for instructions.

Card sizing & fluidity

Small Card

Small cards are 240px wide.

Large Card

Large cards are 480px wide.

Fluid Card

Fluid cards scale their width based on their container. Always wrap them in a column.

Apart from the normal-sized cards (320px wide), there are also two different fixed-width card styles, which can be applied using the .small and .large classes respectively. Fluid cards are available via the .fluid class, but they require one extra step in the card structure, between the .row and .card step, which is to insert either a .col-SCR_SZ, replacing SCR_SZ with one of the available screen size names (sm for smaller screens, md for medium-sized screens or lg for larger screens) or a .col-SCR_SZ-COL_WD to specify columns with fixed width, replacing SCR_SZ with one of the available screen size names and COL_WD with a number from 1 to 12 specifying the width of the column.

Sample code

<div class="card small">
  <div class="section">
    <p>Content</p>
  </div>
</div>

<div class="card large">
  <div class="section">
    <p>Content</p>
  </div>
</div>

<div class="col-sm-12">
  <div class="card fluid">
    <div class="section">
      <p>Content</p>
    </div>
  </div>
</div>

Notes

.fluid cards might not display properly in older browsers, especially legacy versions of Internet Explorer.
Due to the fact that .fluid cards stretch to fill their parent container, they might not fully respect their margins, like the rest of the cards. However, this should not cause any noticable problems with layout, except maybe the odd pixel here and there.

<div class="card">
  <div class="section">
    <p>Content</p>
  </div>
</div>
<div class="card fluid">
  <div class="section">
    <p>Content</p>
  </div>
</div>

Don't: Avoid mixing fixed-width cards with .fluid cards. Mixing the two could result in some unexpected behaviors. You can, however, mix fixed-width cards with fluid columns, which can contain .fluid cards inside them, effectively achieving the desired effect.

<div class="row">
  <div class="card fluid">
    <div class="section">
      <p>Content</p>
    </div>
  </div>
</div>

Don't: Avoid using .fluid cards without wrapping them in columns. Try to use a single .col-sm to wrap the card inside it, otherwise there might be unexpected behavior.

Card color variants

Warning Card

Warning cards are used to display important information to users.

Error Card

Error cards are used to display error messages to users.

Cards can also be used to display important information or error messages to users. You can use the .warning class to display a yellow warning card or, if you need to display an error message to your users, you can use the .error class to display a red error card.

Sample code

<div class="card warning">
  <div class="section">
    <p>Warning</p>
  </div>
</div>

<div class="card error">
  <div class="section">
    <p>Error</p>
  </div>
</div>

Notes

If you want more color variants for your cards, check out the customization page.

<div class="card warning errors">
  <div class="section">
    <p>Bad card</p>
  </div>
</div>

Don't: Avoid combining two card color variants, as this might cause some unexpected behavior.

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.