Cards

scss:ready

freemarker:ready

vue:ready

webComponent: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';
@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.

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>

Card with link

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';
@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.

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';
@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.

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:

ratio	modifier
1:1	`mc-card__visual--1x1`
4:3	(default ratio - no modifier needed)
16:9	`mc-card__visual--16x9`