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="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">
        <article class="user-card">
          <figure class="user-card__visual">
            <img
              src="https://via.placeholder.com/280"
              alt=""
              class="user-card__img"
            />
          </figure>
          <p class="user-card__title">This is a title</p>
          <div class="user-card__content mt-body-s">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
              eveniet a tenetur praesentium accusamus deserunt aspernatur
              voluptate id debitis laboriosam hic repellat natus qui omnis vitae
              nam sequi molestiae in!
            </p>
          </div>
        </article>
      </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"
        disabled
      />
      <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">
        <article class="user-card">
          <figure class="user-card__visual">
            <img
              src="https://via.placeholder.com/280"
              alt=""
              class="user-card__img"
            />
          </figure>
          <div class="user-card__content mt-body-s">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
              eveniet a tenetur praesentium accusamus deserunt aspernatur
              voluptate id debitis laboriosam hic repellat natus qui omnis vitae
              nam sequi molestiae in!
            </p>
          </div>
        </article>
      </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"
        disabled
      />
      <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">
        <article class="user-card">
          <figure class="user-card__visual">
            <img
              src="https://via.placeholder.com/280"
              alt=""
              class="user-card__img"
            />
          </figure>
          <p class="user-card__title">This is a title</p>
        </article>
      </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.

Implementation examples

Viewport: px 
<div class="example">
  <div class="mc-option-group">
    <div class="mc-option-card mc-option-card--small">
      <input
        type="radio"
        name="option-group"
        value="1"
        id="radio-01"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-01"
        onchange="manageButton(this)"
      />
      <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-content">
        <div class="example-image">
          <img
            src="https://media.adeo.com/marketplace/LMFR/73263253/4281a1e5-7beb-4715-ba09-1f8f59cf8b6d.jpeg?width=80"
            alt=""
          />
        </div>
        <div class="example-info">
          <div class="example-info-label">
            <span class="mt-body-l">Nova</span><br />
            <span class="mt-body-m">Aluminium</span>
          </div>
          <div class="example-info-price">
            <span class="mt-body-m example-info-time">à partir de</span>
            <span class="mt-body-l">1549.00€</span>
          </div>
          <button id="exampleButton" class="mc-button mc-button--s hide-button">
            Acheter
          </button>
        </div>
      </div>
    </div>
    <div class="mc-option-card mc-option-card--small">
      <input
        type="radio"
        name="option-group"
        value="2"
        id="radio-02"
        class="mc-radio__input mc-option-card__input"
        aria-label="radio-02"
        onchange="manageButton(this)"
      />
      <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-content">
        <div class="example-image">
          <img
            src="https://media.adeo.com/marketplace/LMFR/73263176/2af9b0ec-82a9-4ba7-9042-fa6de3e8f4f3.jpeg?width=80"
            alt=""
          />
        </div>
        <div class="example-info">
          <div class="example-info-label">
            <span class="mt-body-l">Nova</span><br />
            <span class="mt-body-m">Aluminium</span>
          </div>
          <div class="example-info-price">
            <span class="mt-body-m example-info-time">à partir de</span>
            <span class="mt-body-l">1549.00€</span>
          </div>
          <button id="exampleButton" class="mc-button mc-button--s hide-button ">
            Acheter
          </button>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  function manageButton(radio) {
    const buttons = document.querySelectorAll('.mc-button')
    buttons.forEach(function (button) {
      button.classList.add('hide-button');
    })
    
    const component = radio.closest('.mc-option-card')
    const input = component.querySelector('.mc-button')
    if (radio.checked) {
      input.classList.remove('hide-button')
    }
  }
</script>