<div style="height: 5rem;"></div>
<div class="c-footer">
<div class="c-footer__search">
<div
class="c-dropdown c-dropdown--visible c-dropdown--top"
>
<div class="c-dropdown__trigger">
<div
class="c-textfield c-textfield--icon c-textfield--borderless c-textfield--inverted"
>
<input
class="c-textfield__input"
type="text"
placeholder="Search for organisations, people, docs…"
value="*1"
slot="trigger"
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
</div>
<div class="c-dropdown__content">
<div class="c-popover c-popover--search-small">
<div
class="c-popover__content c-popover__content--no-padding"
>
<div class="c-search c-search--small">
<div class="c-search__columns">...</div>
<div class="c-search__command">
<div
class="o-stack o-stack--align-center o-stack--8"
>
<i class="c-icon c-icon--small u-light">
<!-- SVG element -->
</i>
<span class="c-tag">
<i
class="c-icon c-icon--small c-tag__icon"
>
<!-- SVG element -->
</i>
<span class="c-tag__label">
Go to booking session 1
</span>
</span>
</div>
<div class="c-search__toggle">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small u-light"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div style="height: 30rem;"></div>
<div class="c-footer">
<div class="c-footer__search">
<div
class="c-dropdown c-dropdown--visible c-dropdown--top"
>
<div class="c-dropdown__trigger">
<div
class="c-textfield c-textfield--icon c-textfield--borderless c-textfield--inverted"
>
<input
class="c-textfield__input"
type="text"
placeholder="Search for organisations, people, docs…"
slot="trigger"
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
</div>
<div class="c-dropdown__content">
<div class="c-popover c-popover--search">
<div
class="c-popover__content c-popover__content--no-padding"
>
<div class="c-search">
<div class="c-search__columns">
<div class="c-search__column">
<h3 class="c-search__title">
Persons & Organisations
</h3>
<div class="c-menu c-menu--inline">
<div
class="c-menu__item c-menu__item--selected"
>
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
John Doe
</div>
<div class="c-entity__code">
100000
</div>
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Demo Organisation
</div>
<div class="c-entity__code">
900000
</div>
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
John Doe
</div>
<div class="c-entity__code">
100000
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="c-search__column">
<h3 class="c-search__title">
Pages & Fields
</h3>
<div class="c-menu c-menu--inline">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
Wiki
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">.31</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
Articles
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">.31</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
Organisation number
</div>
<div class="c-menu__description">
Organisation details
</div>
</div>
</a>
</div>
</div>
</div>
<div class="c-search__column">
<h3 class="c-search__title">Articles</h3>
<div class="c-menu c-menu--inline">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
HrmsBooker: Docbatch
</div>
<div class="c-menu__description">
Article description goes here…
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
Organisations in group
</div>
<div class="c-menu__description">
Article description goes here…
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
HrmsWeb: New Employee
</div>
<div class="c-menu__description">
Article description goes here…
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-search__command">
<div class="c-search__help">
Use
<span class="c-shortkey">?</span>
to search for pages and fields,
<span class="c-shortkey">?w</span>
for articles or
<a href="#">learn more about shortkeys</a>
.
</div>
<div class="c-search__toggle">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small u-light"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>