<div class="preview-item">
<h2 class="u-title-tertiary u-mb-md">Component structure</h2>
<div class="c-search-dropdown">
<div class="c-search-dropdown__input">
<div class="c-textfield-wrapper c-textfield-wrapper--icon c-textfield-wrapper--full">
<input class="c-textfield c-textfield--borderless" type="text" placeholder="Search" />
<i class="icon icon-search c-textfield__icon"></i>
</div>
<button class="c-button c-button--subtle c-button--small" type="button">
<i class="icon icon-add c-button__icon"></i>
<div class="c-button__label">Action</div>
</button>
</div>
<div class="c-search-dropdown__filters">
<div class="c-filters">
<div class="c-filter-tag">
<div class="c-filter-tag__label">Filter</div>
</div>
<div class="c-filter-tag c-filter-tag--add">
<div class="c-filter-tag__label">Filter</div>
</div>
<div class="c-filter-tag c-filter-tag--remove">
<div class="c-filter-tag__label">Filter</div>
</div>
</div>
</div>
<div class="c-search-dropdown__toolbar">
<div class="c-button-group">
<div class="c-button-group">
<button class="c-button c-button--default c-button--small">
Toolbar
</button>
</div>
<div class="c-button-group c-button-group--tabbed">
<button class="c-button c-button--default c-button--small c-button--icon">
<i class="icon icon-copy c-button__icon"></i>
</button>
<button class="c-button c-button--default c-button--small c-button--icon">
<i class="icon icon-expand c-button__icon"></i>
</button>
<button class="c-button c-button--default c-button--small c-button--icon">
<i class="icon icon-more c-button__icon"></i>
</button>
</div>
</div>
</div>
<div class="c-search-dropdown__menu">
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Item title</div>
<div class="c-menu__description">Item description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Item title</div>
<div class="c-menu__description">Item description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Item title</div>
<div class="c-menu__description">Item description</div>
</div>
</div>
</div>
<div class="c-search-dropdown__details">
<p class="u-light u-center u-m-auto">Details</p>
</div>
<div class="c-search-dropdown__footer">
<div class="c-toolbar">
<div class="c-toolbar__left">
<button class="c-button c-button--default c-button--small" type="button">
Left action
</button>
</div>
<div class="c-toolbar__right">
<button class="c-button c-button--primary c-button--small" type="button">
<div class="c-button__label">Right action</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="preview-item">
<h2 class="u-title-tertiary u-mb-md">Minimal (with search)</h2>
<div class="c-search-dropdown">
<div class="c-search-dropdown__input">
<div class="c-textfield-wrapper c-textfield-wrapper--icon c-textfield-wrapper--full">
<input class="c-textfield c-textfield--borderless" type="text" placeholder="Search" />
<i class="icon icon-search c-textfield__icon"></i>
</div>
<button class="c-button c-button--subtle c-button--small" type="button">
<i class="icon icon-close c-button__icon"></i>
<div class="c-button__label">Clear</div>
</button>
</div>
<div class="c-search-dropdown__menu">
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
</div>
</div>
</div>
<div class="preview-item">
<h2 class="u-title-tertiary u-mb-md">Minimal (without search)</h2>
<div class="c-search-dropdown">
<div class="c-search-dropdown__menu">
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
<div class="c-menu__item">
<div class="c-menu__text">
<div class="c-menu__label">Title</div>
<div class="c-menu__description">Description</div>
</div>
</div>
</div>
<div class="c-search-dropdown__footer u-center">
<button class="c-button c-button--subtle c-button--small">
<i class="icon icon-close c-button__icon"></i>
<div class="c-button__label">Clear selection</div>
</button>
</div>
</div>
</div>
<div class="preview-item">
<h2 class="u-title-tertiary u-mb-md">Single contact selector</h2>
<div class="c-search-dropdown">
<div class="c-search-dropdown__input">
<div class="c-textfield-wrapper c-textfield-wrapper--icon c-textfield-wrapper--full">
<input class="c-textfield c-textfield--borderless" type="text" placeholder="Search contacts" />
<i class="icon icon-search c-textfield__icon"></i>
</div>
<button class="c-button c-button--subtle c-button--small" type="button">
<i class="icon icon-close c-button__icon"></i>
<div class="c-button__label">Clear</div>
</button>
</div>
<div class="c-search-dropdown__menu">
<div class="c-menu__item">
<i class="icon icon-add c-menu__icon"></i>
<div class="c-menu__text">
<div class="c-menu__label">Add new contact</div>
</div>
</div>
<div class="c-menu__item c-menu__item--active">
<i class="icon icon-contact c-menu__icon"></i>
<div class="c-menu__text">
<div class="c-menu__label">Jane Doe</div>
</div>
</div>
<div class="c-menu__item">
<i class="icon icon-contact c-menu__icon"></i>
<div class="c-menu__text">
<div class="c-menu__label">John Doe</div>
</div>
</div>
</div>
<div class="c-search-dropdown__details">
<p><span class="u-title-tertiary">Jane Doe</span></p>
<p>
Grote Markt 1 <br />
1000 Brussel
</p>
</div>
</div>
</div>
<div class="preview-item">
<h2 class="u-title-tertiary u-mb-md">Multiple event selector</h2>
<div class="c-search-dropdown">
<div class="c-search-dropdown__input">
<div class="c-textfield-wrapper c-textfield-wrapper--icon c-textfield-wrapper--full">
<input class="c-textfield c-textfield--borderless" type="text" placeholder="Search events" />
<i class="icon icon-search c-textfield__icon"></i>
</div>
<button class="c-button c-button--subtle c-button--small" type="button">
<i class="icon icon-add c-button__icon"></i>
<div class="c-button__label">Add filter</div>
</button>
</div>
<div class="c-search-dropdown__menu">
<label class="c-menu__item">
<input type="checkbox" class="c-checkbox c-menu__checkbox" />
<div class="c-menu__text">
<div class="c-menu__label">Reunion Concert</div>
<div class="c-menu__description">10/04/2024</div>
</div>
</label>
<label class="c-menu__item c-menu__item--active">
<input type="checkbox" class="c-checkbox c-menu__checkbox" checked />
<div class="c-menu__text">
<div class="c-menu__label">Reunion Concert</div>
<div class="c-menu__description">10/04/2024</div>
</div>
</label>
<label class="c-menu__item c-menu__item--active">
<input type="checkbox" class="c-checkbox c-menu__checkbox" checked />
<div class="c-menu__text">
<div class="c-menu__label">Reunion Concert</div>
<div class="c-menu__description">10/04/2024</div>
</div>
</label>
<label class="c-menu__item">
<input type="checkbox" class="c-checkbox c-menu__checkbox" />
<div class="c-menu__text">
<div class="c-menu__label">Reunion Concert</div>
<div class="c-menu__description">10/04/2024</div>
</div>
</label>
</div>
<div class="c-search-dropdown__details">
<p>
<span class="u-title-tertiary">Reunion Concert</span><br />
10/04/2024 – 20:00 <br />
<span class="u-light">Main Hall</span>
</p>
<p><i class="icon icon-ticket u-muted"></i> 500 / 600 available</p>
</div>
<div class="c-search-dropdown__footer">
<div class="c-toolbar">
<div class="c-toolbar__left">
<div class="c-button-group">
<button class="c-button c-button--default c-button--small" type="button">
Select all
</button>
<button class="c-button c-button--default c-button--small" type="button">
Deselect all
</button>
</div>
</div>
<div class="c-toolbar__right">
<button class="c-button c-button--primary c-button--small" type="button">
<i class="icon icon-check c-button__icon"></i>
<div class="c-button__label">Apply selection</div>
</button>
</div>
</div>
</div>
</div>
</div>