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="">Farnell</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="">Symmetry Electronics</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><a href="teaser-d-link" class="teaser-d teaser-d has-padding-s has-color-blue teaser-d--vertical"></a>
        <div class="teaser-col col-md-12 teaser-d__text-col">
          <div class="teaser-col-wrapper">
            <div class="teaser-header">
              <h3>
                See all of our Distributors.
              </h3>
            </div>
            <div class="teaser-footer">
              <span class="btn btn btn-secondary btn--icon-right"><span>Discover now</span> <svg class="icon" viewbox="0 0 32 32">
              <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
            </div>
          </div>
        </div>
        <div class="teaser-col teaser-d__image-col col-8 col-sm-6 col-md-4">
          <div class="teaser-image">
            <img src="/images/_teaser/distributors_locations-01.svg" alt="img-alt">
          </div>
        </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">
                    Productname
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Quantity
                  </div>
                </th>
                <th class="table-item-header">
                  <div class="table-item-header-content">
                    Delete
                  </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="">
                  <div class="form-select">
                    <select class="form-select-default-js">
                      <option>
                        1
                      </option>
                      <option>
                        2
                      </option>
                      <option>
                        3
                      </option>
                    </select>
                  </div>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="button-link" class="btn btn-outline-link btn--icon"><svg class="icon" viewbox="0 0 32 32">
                  <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#trash"></use></svg></a>
                </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="">
                  <div class="form-select">
                    <select class="form-select-default-js">
                      <option>
                        1
                      </option>
                      <option>
                        2
                      </option>
                      <option>
                        3
                      </option>
                    </select>
                  </div>
                </td>
                <td class="table-item-column" data-value="" data-value-asc="" data-value-desc="">
                  <a href="button-link" class="btn btn-outline-link btn--icon"><svg class="icon" viewbox="0 0 32 32">
                  <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#trash"></use></svg></a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn btn-outline-gray">Close</button> <button type="button" class="btn btn btn-secondary">Request Now</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>