<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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor aenean.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor aenean.
<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
<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>