Option card

Usage
Code

Import

Import the settings and the option-card scss files for the option card component.


@import 'settings-tools/all-settings';
@import '_c.option-card'; // mandatory
@import 'components/c.checkbox'; // import when using a option-card "multiple option"
@import 'components/c.radio'; // import when using a option-card "single option"

Usage

The creation of an option card component in your code is done using the following HTML structure:


<div class="mc-option-card">
<input
type="radio"
name="option-group"
id="radio-01"
class="mc-radio__input mc-option-card__input"
/>
<label for="radio-01" class="mc-option-card__label"></label>
<div class="mc-option-card__content">
<!-- Here your content -->
</div>
</div>

Implement as a group

In order to group and organize a list of option-card you must wrap them in a HTML element using mc-option-group class.

This class has to be define in the user environment. In fact we let the end-user choose the layout that suit their needs. For example, you can use it with flexbox.


.mc-option-group {
display: flex;
justify-content: space-between | space-evenly;
...
}

Variations

Single option

In order to use the option-card with a single option, you must use radio buttons inside the component.

Multi options

In order to use the option-card with multi choices, you must use checkboxes inside the component.

Centered

In some cases, the radio or the checkbox has to be centered.

To achieve that you have to add mc-option-card--centered modifier to the mc-option-card element.

Padding

In some cases, the radio or the checkbox needs a smaller padding.

To achieve that you have to add mc-option-card--small modifier to the mc-option-card element.

States

Depending on the context of use, the option-cards can have several states:

  • unchecked
  • checked
  • disabled

Content

All your content must go inside the .mc-option-card__content element. The content container is fluid, it means that the user content will shape the card aspect.

Padding

By default, the content has a padding of 16px.

Small

In some cases, your content will need a smaller padding.

To achieve that you have to add mc-option-card--small modifier to the mc-option-card element.

No padding

In some cases, your content need to fill the whole card. To add an image for example.

To achieve that you have to add mc-option-card--no-padding modifier to the mc-option-card element.

Implementation examples