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.
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.
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.
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.
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:
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">
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:
-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:
+.row, which serves as a wrapper for all the cards inside it..row, cards are defined as <div> elements of the .card class..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.
+Note that cards will respond to screen changes, realigning themselves as necessary to fit on the page.
<div class="row">
<div class="card">
@@ -143,7 +143,7 @@
.sections, check the section below.Do: You can add as many .sections as you like to a card.
Do: You can add as many .sections as you like to a card.
<div class="card"> @@ -167,14 +167,14 @@ </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.
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>).
Do: You can use the .section class for things other than <div> elements (e.g. <h1>-<h6>, <p>, <button>).
<div class="row"> @@ -185,7 +185,7 @@ <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.
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">
@@ -201,7 +201,7 @@
</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.
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">
@@ -209,7 +209,7 @@
<!-- 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.
+Don't: You should not have elements that are both cards and rows or columns at the same time.
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.
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.
<div class="card">
<img src="..." class="section media">
@@ -244,7 +244,7 @@
.media class might not be well supported in older browsers, especially legacy versions of Internet Explorer..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..media section.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.
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.
<div class="card small">
<div class="section">
@@ -297,7 +297,7 @@
.fluid cards might not display properly in older browsers, especially legacy versions of Internet Explorer..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.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.
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">
@@ -323,7 +323,7 @@
</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.
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.
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.
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.
<div class="card warning">
<div class="section">
@@ -362,7 +362,7 @@
Don't: Avoid combining two card color variants, as this might cause some unexpected behavior.
+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.
+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.