Molecule

Modal

Show code
            
              <button id="modalButton" data-target="#exampleModal" data-toggle="modal" class="btn btn-primary">Open Modal One</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">
          Productname
        </h4><button type="button" class="modal-close" data-dismiss="modal" aria-label="Close"><svg class="icon" viewbox="0 0 32 32">
        <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#cross"></use></svg></button>
      </div>
      <div class="modal-body">
        <div class="table">
          <table>
            <thead>
              <tr>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Name
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Stock
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    MOQ
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Packaging
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="table-item-row" data-position="">
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">Digi-Key</a>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>
              <tr class="table-item-row" data-position="">
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">Digi-Key</a>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>
              <tr class="table-item-row" data-position="">
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">Digi-Key</a>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="table">
          <table>
            <thead>
              <tr>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Name
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Stock
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    MOQ
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Packaging
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="table-item-row" data-position="">
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">Digi-Key</a>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>
              <tr class="table-item-row" data-position="">
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">Digi-Key</a>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>
              <tr class="table-item-row" data-position="">
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">Digi-Key</a>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn btn-outline-gray">Close</button>
      </div>
    </div>
  </div>
</div><button id="modalButton2" data-target="#exampleModal2" data-toggle="modal" class="btn btn-primary">Open Modal Two</button>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">
          Request Sample
        </h4><button type="button" class="modal-close" data-dismiss="modal" aria-label="Close"><svg class="icon" viewbox="0 0 32 32">
        <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#cross"></use></svg></button>
      </div>
      <div class="modal-body">
        <div class="table">
          <table>
            <thead>
              <tr>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Product
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content"></div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="table-item-row" data-position="">
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">TMC2130-LA</a>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <button class="btn btn-primary">Add to cart</button>
                </td>
              </tr>
              <tr class="table-item-row" data-position="">
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">TMC2130-LA</a>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <button class="btn btn-primary">Add to cart</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn btn-outline-gray">Close</button>
      </div>
    </div>
  </div>
</div>

            
          

.modal--type-a

Show code
            
              <button id="modalTypeAButton1" data-target="#exampleModalTypeA1" data-toggle="modal" class="btn btn-primary">Open Modal Type A One</button>
<div class="modal fade modal--type-a" id="exampleModalTypeA1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="alert alert-primary">
          <div class="alert__wrapper">
            <div class="alert__icon">
              <svg class="icon" viewbox="0 0 32 32">
              <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#check_circle"></use></svg>
            </div>
            <div class="alert__message">
              <strong>Thank you!</strong> This alert needs your attention and it shows an success message.
            </div>
          </div>
        </div><button type="button" class="modal-close" data-dismiss="modal" aria-label="Close"><svg class="icon" viewbox="0 0 32 32">
        <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#cross"></use></svg></button>
      </div>
      <div class="modal-body">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor aenean.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn btn-outline-primary">Close</button>
      </div>
    </div>
  </div>
</div><button id="modalTypeAButton1" data-target="#exampleModalTypeA2" data-toggle="modal" class="btn btn-secondary">Open Modal Type A Two</button>
<div class="modal fade modal--type-a" id="exampleModalTypeA2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="alert alert-highlight">
          <div class="alert__wrapper">
            <div class="alert__icon">
              <svg class="icon" viewbox="0 0 32 32">
              <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#warning"></use></svg>
            </div>
            <div class="alert__message">
              <strong>Attention!</strong> This alert needs your attention and it shows an error message.
            </div>
          </div>
        </div><button type="button" class="modal-close" data-dismiss="modal" aria-label="Close"><svg class="icon" viewbox="0 0 32 32">
        <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#cross"></use></svg></button>
      </div>
      <div class="modal-body">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor aenean.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn btn-outline-primary">Close</button>
      </div>
    </div>
  </div>
</div>

            
          

.modal--type-b

Show code
            
              <button id="modalTypeButton1" data-target="#exampleModalTypeB1" data-toggle="modal" class="btn btn-primary">Open Modal Type B</button>
<div class="modal fade modal--type-b" id="exampleModalTypeB1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"></h4><button type="button" class="modal-close" data-dismiss="modal" aria-label="Close"><svg class="icon" viewbox="0 0 32 32">
        <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#cross"></use></svg></button>
      </div>
      <div class="modal-body">
        <img src="/images/_gallery/csm_RnD-atwork_cb6d9fb83f.jpg">
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>