Content Modules, Search, Swiss Confederation Web Guidelines

Search results

3.1.0

accessibility texts added

Search results are shown in semantically grouped tabs. The categories (groupings) can be chosen freely (e.g. Content pages, News, and Publications). Within the individual tabs, the user can move through the pages with the paging function.

Search Results

39 items found for Health Insurance

Title of the first result

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, eum, dolor, alias quo aspernatur quos soluta ducimus nihil aliquid maiores ipsam aut suscipit eos iste dicta ipsum aperiam distinctio illum.

Title of the second result

News item

image description — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptate, sint animi reiciendis odio cumque corrupti perspiciatis et minus sit quia doloremque. Perspiciatis, atque veritatis ad iste ducimus libero voluptas.

News item

Objects 1 - 3 of 3

Document

Strategie des Bundes in der humanitären Minenräumung 2008 - 2011 (PDF, 90 Seiten, 5-0 MB, deutsch)

Other languages

Image

Video

Objects 1 - 3 of 3

<h2>Search Results</h2>
<p>39 items found for Health Insurance</p>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#contentPages" data-toggle="tab">Content pages (28)</a></li>
	<li><a href="#newsPages" data-toggle="tab">News (16)</a></li>
	<li><a href="#publicationsPages" data-toggle="tab">Publications (3)</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content tab-border">
	<div class="tab-pane active" id="contentPages">

		<!-- Header pagination -->
		<nav class="pagination-container clearfix">
			<span>Object - 2 of 28</span>
			<ul class="pull-right pagination">
				<li class="separator">
					<a href="#" title="Step backward">
            <span class="icon icon--step-backward"></span>
            <span class="sr-only">Step backward</span>
          </a>
				</li>
				<li class="separator"><a href="#">Previous</a></li>
				<li><a href="#">1</a></li>
				<li class="active"><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li>...</li>
				<li><a href="#">28</a></li>
				<li class="separator-left"><a href="#">Next</a></li>
				<li class="separator-left">
					<a href="#" title="Step forward">
            <span class="icon icon--step-forward"></span>
            <span class="sr-only">Step forward</span>
          </a>
				</li>
			</ul>
		</nav>

		<!-- Results -->
		<article class="search-result">
			<ol class="breadcrumb breadcrumb--search">
				<li><a href="#">Home page EDA</a><span class="icon icon--greater"></span></li>
				<li><a href="#">Country & Travel Information</a><span class="icon icon--greater"></span></li>
				<li class="active">Country Selection</li>
			</ol>
			<div class="search-result-header">
				<a href="#">Title of the first result</a>
			</div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, eum, dolor, alias quo aspernatur quos soluta ducimus nihil aliquid maiores ipsam aut suscipit eos iste dicta ipsum aperiam distinctio illum.</p>
		</article>
		<article class="search-result">
			<ol class="breadcrumb breadcrumb--search">
				<li><a href="#">Home page EDA</a><span class="icon icon--greater"></span></li>
				<li><a href="#">Country & Travel Information</a><span class="icon icon--greater"></span></li>
				<li class="active">Country Selection</li>
			</ol>
			<div class="search-result-header">
				<a href="#">Title of the second result</a>
			</div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, eum, dolor, alias quo aspernatur quos soluta ducimus nihil aliquid maiores ipsam aut suscipit eos iste dicta ipsum aperiam distinctio illum.</p>
		</article>

		<!-- Footer pagination -->
		<nav class="pagination-container pagination-end">
			<span>Object - 2 of 28</span>
			<ul class="pull-right pagination">
				<li class="separator">
					<a href="#" title="Step backward">
            <span class="icon icon--step-backward"></span>
            <span class="sr-only">Step backward</span>
          </a>
				</li>
				<li class="separator"><a href="#">Previous</a></li>
				<li><a href="#">1</a></li>
				<li class="active"><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li>...</li>
				<li><a href="#">28</a></li>
				<li class="separator-left"><a href="#">Next</a></li>
				<li class="separator-left">
					<a href="#" title="Step forward">
            <span class="icon icon--step-forward"></span>
            <span class="sr-only">Step forward</span>
          </a>
				</li>
			</ul>
		</nav>

	</div>
	<div class="tab-pane" id="newsPages">

		<!-- Header pagination -->
		<nav class="pagination-container clearfix">
			<span>Object - 2 of 28</span>
			<ul class="pull-right pagination">
				<li class="separator">
					<a href="#" title="Step backward">
            <span class="icon icon--step-backward"></span>
            <span class="sr-only">Step backward</span>
          </a>
				</li>
				<li class="separator"><a href="#">Previous</a></li>
				<li><a href="#">1</a></li>
				<li class="active"><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li>...</li>
				<li><a href="#">28</a></li>
				<li class="separator-left"><a href="#">Next</a></li>
				<li class="separator-left">
					<a href="#" title="Step forward">
            <span class="icon icon--step-forward"></span>
            <span class="sr-only">Step forward</span>
          </a>
				</li>
			</ul>
		</nav>

		<article class="search-result clearfix">
			<div class="search-result-header">
				<a href="#">News item</a>
			</div>
			<figure class="pull-left">
				<img src="http://placehold.it/180x113" alt="image description">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis.</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptate, sint animi reiciendis odio cumque corrupti perspiciatis et minus sit quia doloremque. Perspiciatis, atque veritatis ad iste ducimus libero voluptas.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptate, sint animi reiciendis odio cumque corrupti perspiciatis et minus sit quia doloremque. Perspiciatis, atque veritatis ad iste ducimus libero voluptas.</p>
		</article>
		<article class="search-result clearfix">
			<div class="search-result-header">
				<a href="#">News item</a>
			</div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptate, sint animi reiciendis odio cumque corrupti perspiciatis et minus sit quia doloremque. Perspiciatis, atque veritatis ad iste ducimus libero voluptas.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptate, sint animi reiciendis odio cumque corrupti perspiciatis et minus sit quia doloremque. Perspiciatis, atque veritatis ad iste ducimus libero voluptas.</p>
		</article>

		<!-- Footer pagination -->
		<nav class="pagination-container pagination-end">
			<span>Object - 2 of 28</span>
			<ul class="pull-right pagination">
				<li class="separator">
					<a href="#" title="Step backward">
            <span class="icon icon--step-backward"></span>
            <span class="sr-only">Step backward</span>
          </a>
				</li>
				<li class="separator"><a href="#">Previous</a></li>
				<li><a href="#">1</a></li>
				<li class="active"><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li>...</li>
				<li><a href="#">28</a></li>
				<li class="separator-left"><a href="#">Next</a></li>
				<li class="separator-left">
					<a href="#" title="Step forward">
            <span class="icon icon--step-forward"></span>
            <span class="sr-only">Step forward</span>
          </a>
				</li>
			</ul>
		</nav>
	</div>
	<div class="tab-pane" id="publicationsPages">

		<form action="#" class="form-inline">
			<div class="checkbox checkbox--left">
				<input type="checkbox" id="checkbox1" value="checkbox1" checked>
				<label for="checkbox1">Documents (1)</label>
			</div>
			<div class="checkbox checkbox--left">
				<input type="checkbox" id="checkbox2" value="checkbox2" checked>
				<label for="checkbox2">Images (1)</label>
			</div>
			<div class="checkbox checkbox--left">
				<input type="checkbox" id="checkbox3" value="checkbox3" checked>
				<label for="checkbox3">Videos (1)</label>
			</div>
		</form>

		<div class="pagination-container">
			<span>Objects <b>1</b> - <b>3</b> of 3</span>
		</div>

		<article class="search-result clearfix">
			<div class="search-result-header">
				<a href="#">Document</a>
			</div>
			<figure class="pull-left">
				<img src="http://placehold.it/78x117" alt="image description">
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptate, sint animi reiciendis odio cumque corrupti perspiciatis et minus sit quia doloremque. Perspiciatis, atque veritatis ad iste ducimus libero voluptas.</p>
			<p>
				<a href="#" class="icon icon--before icon--pdf">
          Strategie des Bundes in der humanitären Minenräumung 2008 - 2011 <span class="text-dimmed">(PDF, 90 Seiten, 5-0 MB, deutsch)</span>
        </a>
			</p>
			<p><a href="#" class="icon icon--before icon--greater">Other languages</a></p>
		</article>

		<article class="search-result clearfix">
			<div class="search-result-header">
				<a href="#">Image</a>
			</div>
			<figure class="pull-left">
				<img src="http://placehold.it/180x113" alt="image description">
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptate, sint animi reiciendis odio cumque corrupti perspiciatis et minus sit quia doloremque. Perspiciatis, atque veritatis ad iste ducimus libero voluptas.</p>
		</article>

		<article class="search-result clearfix">
			<div class="search-result-header">
				<a href="#">Video</a>
			</div>
			<iframe src="//player.vimeo.com/video/38388574" width="500" height="281" allowfullscreen style="border: none"></iframe>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptate, sint animi reiciendis odio cumque corrupti perspiciatis et minus sit quia doloremque. Perspiciatis, atque veritatis ad iste ducimus libero voluptas.</p>
		</article>

		<div class="pagination-container pagination-end">
			<span>Objects <b>1</b> - <b>3</b> of 3</span>
		</div>

	</div>
</div>

Navigation

Search

Search

Search Results