Search to link
Search to link component is our widely used modal that allows people to connect with some profile.
Search to link
Search for the item by using the search field. Then select it from the Results table. If you cannot find an item you are looking for, create it by using the appropriate link with the plus icon. To link the selected item, click the Link button on its overview.
Results10
| ID | Name |
|---|---|
| 12345 | Beránek Luboš |
| 12345 | Bešta Lukáš |
| 12345 | Breuová Michaela |
| 12345 | Cha Dawna |
| 12345 | Dvořák Václav |
| 12345 | Breuová Michaela |
| 12345 | Cha Dawna |
| 12345 | Dvořák Václav |
| 12345 | Breuová Michaela |
| 12345 | Cha Dawna |
| 12345 | Dvořák Václav |
| 12345 | Breuová Michaela |
| 12345 | Cha Dawna |
| 12345 | Dvořák Václav |
| 12345 | Breuová Michaela |
| 12345 | Cha Dawna |
| 12345 | Dvořák Václav |
Details
ID: 1234
Sergey Petukhov
- Company: Random data
- Login e-mail: random@data.com
- User type: random
- City: random
Selected groups:
| Groups | Subgroup |
|---|---|
| Media | Newspaper |
| Guest | Foreign guest |
Selected professions:
| Industry | Sector | Profession |
|---|---|---|
| Culture | Film | Actor |
<div id="search-to-link2" class="modal maxw60rem search2link" tabindex="-1">
<div class="modal-heading">
<h2>Search to link</h2>
<div class="js-modal-close"><i class="fas fa-times-circle fa-lg"></i></div>
</div>
<div class="modal-body">
<div class="modal-body__content">
<div class="note note--info mb7">
<p>Search for the item by using the search field. Then select it from the <strong>Results</strong> table. If you cannot find an item you are looking for, create it by using the appropriate link with the plus icon. To link the selected item, click the <strong>Link</strong> button on its overview.</p>
</div>
<div class="elastic-grid--horizontal-20">
<div>
<form action="" class="search__form">
<i class="far fa-search"></i>
<input type="text" placeholder="Search people, companies...">
</form>
<div class="search__db_filters">
<i class="icon-people searchbar__filter searchbar__filter--active"></i>
<i class="icon-company searchbar__filter searchbar__filter--active"></i>
<i class="icon-film searchbar__filter"></i>
<i class="icon-film_packages searchbar__filter"></i>
<i class="icon-event searchbar__filter"></i>
<i class="icon-artist searchbar__filter"></i>
<i class="icon-project-mission searchbar__filter"></i>
</div>
</div>
<div class="search2link__buttons df flex-wrap">
<a class="mr5" href=""><i class="fa fa-plus-circle fa-sm" aria-hidden="true"></i> Create person</a>
<a class="mr5" href=""><i class="fa fa-plus-circle fa-sm" aria-hidden="true"></i> Create company</a>
<a class="mr5" href=""><i class="fa fa-plus-circle fa-sm" aria-hidden="true"></i> Create film</a>
<a class="mr5" href=""><i class="fa fa-plus-circle fa-sm" aria-hidden="true"></i> Create event</a>
<a class="mr5" href=""><i class="fa fa-plus-circle fa-sm" aria-hidden="true"></i> Create project</a>
</div>
</div>
<hr>
<div class="search2link__items elastic-grid--horizontal-20 mt9">
<div class="search2link__items__results card card--notpadded">
<div class="card__heading bb">
<h4>Results<sup>10</sup></h4>
</div>
<div class="card__content elastic-grid--vertical pb0">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item is-open" data-toggle_target_id="bl">Beránek Luboš</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item" data-toggle_target_id="bl2">Bešta Lukáš</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Breuová Michaela</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Cha Dawna</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Dvořák Václav</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Breuová Michaela</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Cha Dawna</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Dvořák Václav</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Breuová Michaela</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Cha Dawna</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Dvořák Václav</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Breuová Michaela</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Cha Dawna</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Dvořák Václav</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Breuová Michaela</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Cha Dawna</td>
</tr>
<tr>
<td>12345</td>
<td class="js-toggle toggle arrow-caret-right icon-after search2link__item">Dvořák Václav</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="search2link__items__content float-button_wrapper card card--notpadded">
<div class="card__heading bb pl5">
<h4>Details</h4>
</div>
<div class="card__content elastic-grid--vertical pt0 pb0">
<div class="df pl4 pt4">
<span class="avatar avatar--medium">
<img src="https://randomuser.me/api/portraits/men/44.jpg">
</span>
<div class="ml6">
<h4>ID: 1234</h4>
<h3>Sergey Petukhov</h3>
</div>
</div>
<ul class="pl4">
<li>Company: <b>Random data</b></li>
<li>Login e-mail: <b>random@data.com</b></li>
<li>User type: <b>random</b></li>
<li>City: <b>random</b></li>
</ul>
<div>
<h4 class="pl3">Selected groups:</h4>
<table>
<thead>
<tr>
<th>Groups</th>
<th>Subgroup</th>
</tr>
</thead>
<tbody>
<tr>
<td>Media</td>
<td>Newspaper</td>
</tr>
<tr>
<td>Guest</td>
<td>Foreign guest</td>
</tr>
</tbody>
</table>
</div>
<div>
<h4 class="pl3">Selected professions:</h4>
<table>
<thead>
<tr>
<th>Industry</th>
<th>Sector</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>Culture</td>
<td>Film</td>
<td>Actor</td>
</tr>
</tbody>
</table>
</div>
<div class="link-btn float-button_container--sticky flex-gap--right">
<input type="submit" class="btn btn--primary" value="Link" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>