Search
Use these patterns to add search your project or subsite.
Search in local masthead
You may place your service search in the local masthead using this pattern. This is the most widely used approach, if you do so be sure to include the id #local-search on your form element.
When your page contains an element with the id of #local-search or #ebi_search, the class .no-global-search will be added to the body tag and the black bar (gloabl-masthead) search will be disabled, as has happened on this page.
Standalone search
If you want to place your site search inside your main content, use this pattern it's much the same as the above.
Search HTML
<div class="row">
<div class="columns medium-12">
<!-- local-search -->
<h3>Search in local masthead</h3>
<p>You may place your service search in the local masthead using this pattern. This is the most widely used approach, if you do so be sure to include the id <code>#local-search</code> on your <code>form</code> element.</p>
<p>When your page contains an element with the id of <code>#local-search</code> or <code>#ebi_search</code>, the class <code>.no-global-search</code> will be added to the <code>body</code> tag and the black bar (gloabl-masthead) search will be disabled, as has happened on this page.</p>
<div id="local-masthead" class="meta-background-color meta-background-image columns">
<header>
<div class="masthead row">
<!-- local-title -->
<div class="columns medium-7" id="local-title">
<h1><a href="#" title="Back to EBI Pattern library homepage">Sample masthead</a></h1>
</div>
<!-- /local-title -->
<div class="columns medium-5">
<form id="local-search" name="local-search" action="[search-action]" method="post">
<fieldset>
<div class="input-group margin-bottom-none">
<input type="text" name="first" id="local-searchbox" placeholder="Search this service" class="input-group-field">
<div class="input-group-button">
<input type="submit" name="submit" value="1" class="button icon icon-functional">
</div>
</div>
<small class="">
<!-- If your search is more complex than just a keyword search, you can link to an Advanced Search -->
<!-- <span class="adv"><a href="../search" id="adv-search" title="Advanced">Advanced</a></span> | -->
<!-- Include some example searchterms - keep them short and few. -->
<a href="[search-url-1]">[search-1]</a>
<a href="[search-url-1]">[search-2]</a>
<a href="[search-url-1]">[search-3]</a>
</small>
</fieldset>
</form>
<!-- /local-search -->
</div>
</div>
</header>
</div>
</div>
</div>
<div class="row">
<div class="columns medium-12">
<h3 class="padding-top-large">Standalone search</h3>
<p>If you want to place your site search inside your main content, use this pattern it's much the same as the above.</p>
<div class="row">
<div class="columns medium-5 medium-push-2 callout">
<form id="content-search" name="content-search" action="[search-action]" method="post">
<h4>Search this project</h4>
<fieldset>
<div class="input-group margin-bottom-none">
<input type="text" name="first" id="content-searchbox" class="input-group-field">
<div class="input-group-button">
<input type="submit" name="submit" value="1" class="button icon icon-functional">
</div>
</div>
<small class="">
<!-- If your search is more complex than just a keyword search, you can link to an Advanced Search -->
<span class="adv"><a href="../search" id="adv-search" title="Advanced">Advanced</a></span>
|
<!-- Include some example searchterms - keep them short and few. -->
<a href="[search-url-1]">[search-1]</a>
<a href="[search-url-1]">[search-2]</a>
<a href="[search-url-1]">[search-3]</a>
</small>
</fieldset>
</form>
</div>
</div>
</div>
</div>
Search Style
You can find the original source of the CSS as .scss
Search
- Last updated: 27 Jun 2016
- Source
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.
All patterns
- Buttons 2 patterns
- Devices 2 patterns
- Forms 2 patterns
- Grid 2 patterns
- Images 3 patterns
- Labels 3 patterns
- Layout 15 patterns
- Links 3 patterns
- Lists 3 patterns
- Navigation 5 patterns
- Search 6 patterns
- Tables 4 patterns
- Typography 11 patterns
- Usability 5 patterns
- Visuals 8 patterns
- Writing 3 patterns