Card Select

  <tk-card-select name="my-card-select-3">
    <tk-card-select-option value="option-value-1">
      <tk-card-body>
        <h4 class="t-medium">Enabled option</h4>
        <p>Enabled option description.</p>
      </tk-card-body>
    </tk-card-select-option>
    <tk-card-select-option value="option-value-2" disabled>
      <tk-card-body>
        <h4 class="t-medium">Disabled option</h4>
        <p>Disabled option description.</p>
      </tk-card-body>
    </tk-card-select-option>
  </tk-card-select>

  <tk-card-select name="my-card-select-4">
    <div slot="legend" fieldset class="mb-2x">
      Card Select with medium border radius
    </div>
    <tk-card-select-option value="option1">
      <tk-card-body>
        <h4 class="t-medium">Some text</h4>
        <p>Some description.</p>
      </tk-card-body>
    </tk-card-select-option>
    <tk-card-select-option value="option2">
      <tk-card-body>
        <h4 class="t-medium">Other text</h4>
        <p>Other description.</p>
      </tk-card-body>
    </tk-card-select-option>
  </tk-card-select>

  <hr class="form__rule">

  <tk-card-select name="my-card-select-5" border-radius="large">
    <div slot="legend" fieldset class="mb-2x">
      Card Select with large border radius
    </div>
    <tk-card-select-option value="option1">
      <tk-card-body>
        <h4 class="t-medium">Some text</h4>
        <p>Some description.</p>
      </tk-card-body>
    </tk-card-select-option>
    <tk-card-select-option value="option2">
      <tk-card-body>
        <h4 class="t-medium">Other text</h4>
        <p>Other description.</p>
      </tk-card-body>
    </tk-card-select-option>
  </tk-card-select>

    <tk-card-select name="some-card-select">
    <div slot="legend" fieldset class="mb-2x">
      Select from one of these options
    </div>
    <tk-card-select-option value="option1">
      <tk-card-body>
        <div class="my-option">
          <p>Some text for my multiple options</p>
        </div>
      </tk-card-body>
    </tk-card-select-option>
    <tk-card-select-option value="option2">
      <tk-card-body>
        <div class="my-option">
          <p>Some text for my multiple options</p>
        </div>
      </tk-card-body>
    </tk-card-select-option>
    <tk-card-select-option value="option3">
      <tk-card-body>
        <div class="my-option">
          <p>Some text for my multiple options</p>
        </div>
      </tk-card-body>
    </tk-card-select-option>
    <tk-card-select-option value="option4">
      <tk-card-body>
        <div class="my-option">
          <p>Some text for my multiple options</p>
        </div>
      </tk-card-body>
    </tk-card-select-option>
    <tk-card-select-option value="option5">
      <tk-card-body>
        <div class="my-option">
          <p>Some text for my multiple options</p>
        </div>
      </tk-card-body>
    </tk-card-select-option>
    <tk-card-select-option value="option6">
      <tk-card-body>
        <div class="my-option">
          <p>Some text for my multiple options</p>
        </div>
      </tk-card-body>
    </tk-card-select-option>
    <style>
      .my-option {
        width: 200px;
        height: 200px;
      }
    </style>

    <tk-button
      aria-haspopup="true"
      onClick="modal.openModal()"
    >
      Action Modal
    </tk-button>
    <tk-modal id="modal" onClose="displayText(event)" size="auto">
    <tk-modal-header>
      Create unmoderated test
    </tk-modal-header>
    <tk-modal-body>
      <tk-card-select name="my-card-select-1" border-radius="large">
        <div slot="legend" fieldset class="mb-2x">
          Settings
        </div>
        <tk-card-select-option value="option1">
          <tk-card-header>
            <div class="l-inline-flex l-v-center">
              <tk-pictogram-think-out-loud class="ml-2x mr-2x" size="large"></tk-pictogram-think-out-loud>
              <div class="ml-2x">
                <h4 class="t-medium">Think-out-loud</h4>
                <span class="t-ghost">Rich qualitative feedback</span>
              </div>
            </div>
          </tk-card-header>
          <tk-card-body>
            <div class="ml-2x my-custom-option">
              <p>Audio and screen recording </p>
              <p>Capture user thoughts as they navigate tasks</p>
            </div>
          </tk-card-body>
           <tk-card-footer>
            <div class="ml-2x">
              <span class="t-ghost">Recommended audience size: <strong>10</strong></span>
            </div>
           </tk-card-footer>
        </tk-card-select-option>
        <tk-card-select-option value="option2">
          <tk-card-header>
            <div class="l-inline-flex l-v-center">
              <tk-pictogram-think-out-loud class="ml-2x mr-2x" size="large"></tk-pictogram-think-out-loud>
              <div class="ml-2x">
                <h4 class="t-medium">Think-out-loud</h4>
                <span class="t-ghost">Rich qualitative feedback</span>
              </div>
            </div>
          </tk-card-header>
          <tk-card-body>
            <div class="ml-2x my-custom-option">
              <p class="pato">Audio and screen recording </p>
              <p>Capture user thoughts as they navigate tasks</p>
            </div>
          </tk-card-body>
           <tk-card-footer>
            <div class="ml-2x">
              <span class="t-ghost">Recommended audience size: <strong>10</strong></span>
            </div>
           </tk-card-footer>
        </tk-card-select-option>
      </tk-card-select>
    </tk-modal-body>
    <tk-modal-footer>
      <tk-button
        aria-label="Close Modal"
        class="mr-md-2x mb-sm-2x btn-sm-block"
        onClick="modal.closeModal()"
        type="outline"
      >
        Cancel
      </tk-button>
      <tk-button
        class="btn-sm-block"
        onClick="modal.closeModal()"
      >
        Create
      </tk-button>
    </tk-modal-footer>
    </tk-modal>
    <style>
      .my-custom-option {
        width: 210px;

        @media (max-width: 60em) {
          width: 90%;
        }
      }
    </style>