Components

Cards

sketch:Readyscss:Ready

Import

Import the settings and the card scss files.

In addition to the basic files listed above, you must also import the _c.button.scss or _c.links file, when you use a button or link inside your card.

@import 'settings-tools/_all-settings';
@include import-font-families();
@import 'components/_c.button'; // optional
@import 'components/_c.links'; // optional
@import 'components/_c.card';

Usage

The creation of a Card component in your code is done using the following HTML structure:

<div class="mc-card">
<figure class="mc-card__visual">
<img src="your-example-image.jpg" alt="" class="mc-card__img" />
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card title</h1>
<h2 class="mc-card__subtitle">There can be a subtitle here.</h2>
<div class="mc-card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<footer class="mc-card__footer">
<a href="#" class="mc-link mc-link--m">Default link</a>
</footer>
</article>
</div>

The Card component is composed of several elements, namely:

  • an image
  • a title
  • a subtitle
  • a description text
  • a card footer with actions
Mandatory elements

Among these elements, please note that the image and the title are mandatory, and must always appear in your Card elements. The other elements are optional.

Information

You are free to use the HTML tag of your choice for the subtitle element of the Card component. For the title element, we recommend that you use an Hn title tag whenever possible.

Variations

Unboxed version

The unboxed version is best used when you have a large amount of cards to display to avoid graphic complexity due to the repetition of the outline.

Viewport: px
<div class="example">
<div class="mc-card">
<figure class="mc-card__visual">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card title</h1>
<h2 class="mc-card__subtitle">There can be a subtitle here.</h2>
<div class="mc-card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<footer class="mc-card__footer">
<a href="#" class="mc-link mc-link--m">Default link</a>
</footer>
</article>
</div>
</div>

Outlined version

Outlined cards are used to avoid floating impressions.

To define an outlined card, you must add the mc-card--bordered modifier to your mc-card element.

<div class="mc-card mc-card--bordered">
<!-- the card elements here -->
</div>
Viewport: px
<div class="example">
<div class="mc-card mc-card--bordered">
<figure class="mc-card__visual">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card title</h1>
<h2 class="mc-card__subtitle">There can be a subtitle here.</h2>
<div class="mc-card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<footer class="mc-card__footer">
<button type="button" class="mc-button mc-button--s">
<span class="mc-button__label">
Button label
</span>
</button>
</footer>
</article>
</div>
</div>

You can use a link inside your card. A link is used when the user needs to go on another page.

When using a link in a card, you must make sure to perform the following scss imports:

@import 'settings-tools/_all-settings';
@include import-font-families();
@import 'components/_c.links';
@import 'components/_c.card';
Warning

The link inserted in your card must be a Mozaic Link of size M.

Learn more by looking at the documentation of the Mozaic Link.

Viewport: px
<div class="example">
<div class="example__item">
<div class="mc-card">
<figure class="mc-card__visual">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card title</h1>
<h2 class="mc-card__subtitle">There can be a subtitle here.</h2>
<div class="mc-card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<footer class="mc-card__footer">
<a href="#" class="mc-link mc-link--m">Default link</a>
</footer>
</article>
</div>
</div>
<div class="example__item">
<div class="mc-card mc-card--bordered">
<figure class="mc-card__visual">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card title</h1>
<h2 class="mc-card__subtitle">There can be a subtitle here.</h2>
<div class="mc-card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<footer class="mc-card__footer">
<a href="#" class="mc-link mc-link--m">Default link</a>
</footer>
</article>
</div>
</div>
</div>

Card with button

You can also use a button inside your card. A button is used when the user can make an action on a card.

When using a button in a card, you must make sure to perform the following scss imports:

@import 'settings-tools/_all-settings';
@include import-font-families();
@import 'components/_c.button';
@import 'components/_c.card';
Warning

The button inserted in your card must be a Mozaic Button of size S.

Learn more by looking at the documentation of the Mozaic Button.

Viewport: px
<div class="example">
<div class="example__item">
<div class="mc-card">
<figure class="mc-card__visual">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card title</h1>
<h2 class="mc-card__subtitle">There can be a subtitle here.</h2>
<div class="mc-card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<footer class="mc-card__footer">
<button type="button" class="mc-button mc-button--s">
<span class="mc-button__label">
Button label
</span>
</button>
</footer>
</article>
</div>
</div>
<div class="example__item">
<div class="mc-card mc-card--bordered">
<figure class="mc-card__visual">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card title</h1>
<h2 class="mc-card__subtitle">There can be a subtitle here.</h2>
<div class="mc-card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<footer class="mc-card__footer">
<button type="button" class="mc-button mc-button--s">
<span class="mc-button__label">
Button label
</span>
</button>
</footer>
</article>
</div>
</div>
</div>

Card image ratio

When creating your Card component, you can also define which image ratio should be applied to your component's visual.

For this you have the possibility to choose among the following image ratios, and to apply on your element mc-card__visual the associated css modifier:

ratiomodifier
1:1mc-card__visual--1x1
4:3(default ratio - no modifier needed)
16:9mc-card__visual--16x9
Viewport: px
<div class="example">
<div class="example__item">
<div class="mc-card mc-card--bordered">
<figure class="mc-card__visual mc-card__visual--1x1">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card 1x1</h1>
<div class="mc-card__body">
<p>A card with the image ratio of 1:1</p>
</div>
<footer class="mc-card__footer">
<a href="#" class="mc-link mc-link--m">Default link</a>
</footer>
</article>
</div>
</div>
<div class="example__item">
<div class="mc-card mc-card--bordered">
<figure class="mc-card__visual">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card 4x3</h1>
<div class="mc-card__body">
<p>A card with the image ratio of 4:3</p>
</div>
<footer class="mc-card__footer">
<a href="#" class="mc-link mc-link--m">Default link</a>
</footer>
</article>
</div>
</div>
<div class="example__item">
<div class="mc-card mc-card--bordered">
<figure class="mc-card__visual mc-card__visual--16x9">
<img
src="https://images.unsplash.com/photo-1534889156217-d643df14f14a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640"
alt="Card image"
class="mc-card__img"
/>
</figure>
<article class="mc-card__content">
<h1 class="mc-card__title">Card 16x9</h1>
<div class="mc-card__body">
<p>A card with the image ratio of 16:9</p>
</div>
<footer class="mc-card__footer">
<a href="#" class="mc-link mc-link--m">Default link</a>
</footer>
</article>
</div>
</div>
</div>