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