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

1. At the outermost level of the card layout syntax is a `.row`, which serves as a wrapper for all the cards inside it.
2. Inside the `.row`, cards are defined as `<div>` elements of the `.card` class.
3. Finally, inside the `.card`s, 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 `.section`s, 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 `.section`s 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 `.section`s, 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.