Components

Option card

scss:Readyfigma:Ready
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.

Viewport: px 
<div class="example">
  <div class="mc-option-group">
    <div class="mc-option-card">
      <input
        type="radio"
        name="option-group"
        id="radio-01"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-01"
      />
      <label for="radio-01" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
    <div class="mc-option-card">
      <input
        type="radio"
        name="option-group"
        id="radio-02"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-02"
        checked
      />
      <label for="radio-02" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
    <div class="mc-option-card">
      <input
        type="radio"
        name="option-group"
        id="radio-03"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-03"
        disabled
      />
      <label for="radio-03" class="mc-option-card__label">
        <span class="mc-option-card__label-text">Label group</span>
      </label>
      <div class="mc-option-card__content example-size"></div>
    </div>
  </div>
</div>

Multi options

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

Viewport: px 
<div class="example">
  <div class="mc-option-group">
    <div class="mc-option-card">
      <input
        type="checkbox"
        name="option-group"
        id="checkbox-01"
        class="mc-checkbox__input mc-option-card__input"
        aria-label="checkbox-01"
      />
      <label for="checkbox-01" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
    <div class="mc-option-card">
      <input
        type="checkbox"
        name="option-group"
        id="checkbox-02"
        class="mc-checkbox__input mc-option-card__input"
        aria-label="checkbox-02"
        checked
      />
      <label for="checkbox-02" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
    <div class="mc-option-card">
      <input
        type="checkbox"
        name="option-group"
        id="checkbox-3"
        class="mc-checkbox__input mc-option-card__input"
        aria-label="checkbox-03"
        checked
        disabled
      />
      <label for="checkbox-03" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
  </div>
</div>

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.

Viewport: px 
<div class="example">
  <div class="mc-option-group">
    <div class="mc-option-card mc-option-card--centered">
      <input
        type="radio"
        name="option-group"
        value="1"
        id="radio-01"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-01"
        checked
      />
      <label for="radio-01" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
    <div class="mc-option-card mc-option-card--centered">
      <input
        type="radio"
        name="option-group"
        value="2"
        id="radio-02"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-02"
      />
      <label for="radio-02" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
  </div>
</div>

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
Viewport: px 
<div class="example">
  <div class="mc-option-group">
    <div class="mc-option-card">
      <input
        type="radio"
        name="option-group"
        id="radio-01"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-01"
      />
      <label for="radio-01" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
    <div class="mc-option-card">
      <input
        type="radio"
        name="option-group"
        id="radio-02"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-02"
        checked
      />
      <label for="radio-02" class="mc-option-card__label"
        ><span class="mc-option-card__label-text">Label group</span></label
      >
      <div class="mc-option-card__content example-size"></div>
    </div>
    <div class="mc-option-card">
      <input
        type="radio"
        name="option-group"
        id="radio-03"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-03"
        disabled
      />
      <label for="radio-03" class="mc-option-card__label">
        <span class="mc-option-card__label-text">Label group</span>
      </label>
      <div class="mc-option-card__content example-size"></div>
    </div>
  </div>
</div>

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.