---
layout: cms-layout
fabricator: true
---


<div class="container-fluid">

<div class="row">
	<div class="col-sm-12" id="content">
		<div class="row">
			<div class="container-fluid">
				<div class="alert alert--emergency clearfix">
					<div class="col-sm-3">
						<h3>Lorem ipsum</h3>
					</div>
					<div class="col-sm-9">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, placeat, recusandae, amet, modi hic accusamus cumque id nesciunt debitis nihil neque quaerat reprehenderit iste mollitia laborum natus culpa laboriosam labore.
						</p>
					</div>
				</div>
			</div>
			<div class="col-md-9">

				<!-- focus panes -->
				<div class="tab-content tab-border tab-focus">
					<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>

					<div class="tab-pane active in" id="home">
						<div class="row">
							<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
							<div class="col-sm-5 nopadding-left">
								<h2>Lorem ispum title 1</h2>
								<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
								<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="profile">
						<div class="row">
							<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
							<div class="col-sm-5 nopadding-left">
								<h2>Lorem ispum title 2</h2>
								<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
								<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="messages">
						<div class="row">
							<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
							<div class="col-sm-5 nopadding-left">
								<h2>Lorem ispum title 3</h2>
								<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
								<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="settings">
						<div class="row">
							<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
							<div class="col-sm-5 nopadding-left">
								<h2>Lorem ispum title 4</h2>
								<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
								<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
							</div>
						</div>
					</div>
				</div>

				<!-- focus tabs -->
				<ul class="nav nav-tabs nav-tabs-focus nav-justified">
					<li class="active"><a href="#home" data-toggle="tab">Title longer than usual</a></li>
					<li><a href="#profile" data-toggle="tab">Title 2</a></li>
					<li><a href="#messages" data-toggle="tab">Das ist der Megateaser</a></li>
					<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
				</ul>
			</div>

			<div class="col-md-3">
				<!-- News list example -->
				<div class="list-group news-feed">
					<div class="list-group-header">
						<h2 class="pull-left">News</h2>
						<a href="#" class="pull-right icon icon--before icon--list">all</a>
					</div>
					<div class="scroll-y">
						<div class="list-group-item">
							<p>
								23.05.2012<br>
								Medienmitteilung 1
							</p>
							<a href="#">
								Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien
							</a>
						</div>
						<div class="list-group-item">
							<p>
								23.05.2012<br>
								Medienmitteilung 2
							</p>
							<a href="#">
								Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien
							</a>
						</div>
						<div class="list-group-item">
							<p>
								23.05.2012<br>
								Medienmitteilung 3
							</p>
							<a href="#">
								Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien
							</a>
						</div>
						<div class="list-group-item">
							<p>
								23.05.2012<br>
								Medienmitteilung 3
							</p>
							<a href="#">
								Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien
							</a>
						</div>
						<div class="list-group-item">
							<p>
								23.05.2012<br>
								Medienmitteilung 3
							</p>
							<a href="#">
								Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-9">
				<div class="list-group">

					<div class="list-group-header">
						<h2 class="pull-left">Themes</h2>
						<a href="#" class="pull-right icon icon--before icon--list">all</a>
					</div>

					<div class="row">
						<div class="col-sm-4">
							<img src="http://placehold.it/282x176" alt="Image description">
							<h3><a href="#">Title in H3</a></h3>
							<p>
								Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum.</p>
							<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
						</div>
						<div class="col-sm-4">
							<img src="http://placehold.it/282x176" alt="Image description">
							<h3><a href="#">Title in H3</a></h3>
							<p>
								arbitrantur.</p>
							<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
						</div>
						<div class="col-sm-4">
							<img src="http://placehold.it/282x176" alt="Image description">
							<h3><a href="#">Title in H3</a></h3>
							<p>
								Nihilo beatiorem esse.</p>
							<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">

				<div class="list-group">
					<div class="list-group-header">
						<h2 class="pull-left">Director</h2>
					</div>

					<div class="row">
						<div class="col-sm-12">
							<div class="bordered-well">
								<img src="http://placehold.it/282x176" alt="Image description">
								<div class="well">
									<h3><a href="#">Title in H3</a></h3>
									<p>
										Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
									</p>
									<ul>
										<li><a href="#">Link n°1</a></li>
										<li><a href="#">Link n°2</a></li>
										<li><a href="#">Link n°3</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6 col-sm-4">
				<div class="list-group">
					<div class="list-group-header">
						<h2 class="pull-left">Title</h2>
						<a href="#" class="pull-right icon icon--before icon--list">all</a>
					</div>

					<div class="row">
						<div class="col-sm-12">
							<p>
								<img src="http://placehold.it/555x320" alt="Image description">
							</p>
							<h3><a href="#">Title in H3</a></h3>
							<p>
								Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum.</p>
							<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-sm-8">
				<div class="list-group">
					<div class="list-group-header">
						<h2 class="pull-left">DEZA - Projekte Weltweit</h2>
						<a href="#" class="pull-right icon icon--before icon--list">all</a>
					</div>

					<div id="carousel-example-captions" class="carousel slide">

						<!-- Carousel Indicators -->
						<ol class="carousel-indicators" aria-hidden="true">
							<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
							<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
							<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
						</ol>

						<!-- Carousel items -->
						<div class="carousel-inner">
							<div class="item active">
								<h3>Entwicklungspolitik 1</h3>
								<p>
									<img class="carousel-img" src="http://placehold.it/588x331" alt="image description">
								</p>
								<div class="spacer"></div>
								<h4><a href="#">Strassenbau in Nepal 1: ein Weg aus der Armut</a></h4>
								<figure class="pull-left">
									<img src="http://placehold.it/130x81" alt="image description">
								</figure>
								<p>
									<small>
										In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae.
									</small>
								</p>
							</div>
							<div class="item">
								<h3>Entwicklungspolitik 2</h3>
								<p>
									<img class="carousel-img" src="http://placehold.it/588x331" alt="image description">
								</p>
								<div class="spacer"></div>
								<h4><a href="#">Strassenbau in Nepal 2: ein Weg aus der Armut</a></h4>
								<figure class="pull-left">
									<img src="http://placehold.it/130x81" alt="image description">
								</figure>
								<p>
									<small>
										In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae.
									</small>
								</p>
							</div>
							<div class="item">
								<h3>Entwicklungspolitik 3</h3>
								<p>
									<img class="carousel-img" src="http://placehold.it/588x331" alt="image description">
								</p>
								<div class="spacer"></div>
								<h4><a href="#">Strassenbau in Nepal 3: ein Weg aus der Armut</a></h4>
								<figure class="pull-left">
									<img src="http://placehold.it/130x81" alt="image description">
								</figure>
								<p>
									<small>
										In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. Lorem porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.
									</small>
								</p>
							</div>

						</div>

						<!-- Carousel left/right -->
						<a class="left carousel-control icon icon--before icon--less" href="#carousel-example-captions" data-slide="prev" aria-label="previous"></a>
						<a class="right carousel-control icon icon--before icon--greater" href="#carousel-example-captions" data-slide="next" aria-label="next"></a>

					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>